Show top button on right when scrolling down to a limit using Jquery

Top button show shown when scrolling down a web page. It should not be shown when end user is already on the top. To accomplish this I am sharing a super easy jquery and HTML code.

HTML Code

<a id="top" style="display: block; cursor: pointer;">Go to Top</a>

Jquery Code


//Scroll to top
$(document).ready(function(){

var sx = $("#header");  //IF of any html element which you want to set where the top button should show.
var posx = sx.position();

$(window).scroll(function ()

{

var windowposx = $(window).scrollTop();

if (windowposx >= posx.top)

{
$("#top").css({ display: 'block' })

} else {
$("#top").css({ display: 'none' })

}


});

//End scroll to top

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *