• Published:

If you want the same back-to-top feature used on many blogs, this version is straightforward and does the job without much setup. The idea is simple: keep the button fixed in the lower-right corner of the browser window so it does not shift when the window size changes, and only show it after the page has been scrolled down a certain distance.

Before anything else, make sure jQuery is included on the page:


<script type="text/javascript" src="https://libs.cdnjs.net/jquery/1.8.3/jquery.min.js"></script>

Then place the following jQuery code somewhere appropriate in your page:


<script type="text/javascript">
jQuery(document).ready(function(){
    $(window).scroll(function() {
                var scroHei = $(window).scrollTop();//滚动的高度
                if (scroHei > 400) {
                    $('.gotop').fadeIn();
                } else {
                    $('.gotop').fadeOut();
                }
            });
    jQuery('.gotop').click(function(){
        jQuery('html,body').animate({
            scrollTop: '0px'
            }, 800);
        });
});
</script>

This script does two things:

  • It watches the scroll position of the window.
  • Once the page is scrolled more than 400 pixels, the .gotop button fades in; otherwise it fades out.
  • Clicking the button smoothly scrolls the page back to the top in 800 milliseconds.

After that, add the related back-to-top element somewhere between <body> and </body>.

You also need the CSS below:


.roll {bottom:120px;float:right;position:fixed;right:60px;width:32px;z-index: 9999;display: none;}
.roll_top {position:relative;cursor:pointer;height:32px;width:32px;border-radius:4px;background:url("up.png") no-repeat;}
.roll_top:hover {background:url("up.png") no-repeat -32px 0;}

The styles keep the button fixed near the bottom-right corner, hide it by default, and swap the sprite position on hover.

Use this image for up.png, or replace it with your own:

up icon

Once those pieces are in place, the feature is ready to use.

Related Posts