一键回到顶部

一键回到顶部

JavaScript如下：

$(function(){
  //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
  $(function () {
    $(window).scroll(function(){
      if ($(window).scrollTop()>100){
        $("#back-to-top").fadeIn(1500);
      }
      else
      {
        $("#back-to-top").fadeOut(1500);
      }
      //回到底部
      /*if ($(window).scrollTop()<1000&&$(window).scrollTop()>100){
        $("#back-to-bottom").fadeIn(1500);
      }
      else
      {
        $("#back-to-bottom").fadeOut(1500);
      }*/
     
    });
    //当点击跳转链接后，回到页面顶部位置
    $("#back-to-top").click(function(){
      if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, 100);//动画效果
        return false;
      }
      $('body').animate({ scrollTop: 0 }, 100);
      return false;
    });
     //回到底部
      /*
    $("#back-to-bottom").click(function() {

        $("html").animate({scrollTop: 4000 }, 100);
        return false;
    });*/
  });
});

HTML:

<div id="back-to-top" style="" title="返回顶部"><img href="#top" src="../images/017.png"/></div>
<!--<p id="back-to-bottom"><a href="#bottom">返回底部</a></p>-->

css:

#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:0px;
transform: scale(0.7);//图片缩小为0.7倍
}
p#back-to-bottom{
  position:fixed;
  display:none;
  bottom:100px;
  right:140px;
}

无背景图：