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.


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

Jquery Code

//Scroll to top

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 >=

$("#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 *