back to top button

1	$("#scroll_icon").click(function()
2	{
3		jQuery('html,body').animate({scrollTop:0},2000);
4	})

1//EITHER:
2
3window.scroll({
4 top: 0, 
5 left: 0, 
6 behavior: 'smooth' 
7});
8
9//*****************************
10//OR:
11
12window.scroll({top: 0, left: 0});
13//Or with jQuery
14$('html,body').scrollTop(0);
15//with animation
16$('html, body').animate({ scrollTop: 0 }, 'fast');

1// Select all »a« elements with a parent tag »nav« and add a function that is executed on click
2$('#id a').on('click', function (e) {
3
4   // Define variable of the clicked »a« element (»this«) and get its href value.
5   var href = $(this).attr('href')
6
7   // Run a scroll animation to the position of the element which has the same id like the href value.
8   $('html, body').animate({
9      scrollTop: $(href).offset().top
10   }, '300')
11
12   // Prevent the browser from showing the attribute name of the clicked link in the address bar
13   e.preventDefault()
14
15})

1// BACK TO TOP BUTTON WITH JQUERY //
2const win = $(window);
3const b2t = $('.back-top');
4const html_body = $('html, body');
5//back to top fadetoogle//
6win.scroll(() => win.scrollTop() > 100 ? b2t.fadeIn() : b2t.fadeOut());
7//back to top effect//
8b2t.click(() => html_body.animate({scrollTop: 0}, 2500));
9