经典的 jquery 多端自适应返回顶部按钮

依赖Jquery 注意加载顺序

css

#back-top {
    position:fixed;
    width:60px;
    height:60px;
    bottom:30px;
    right:30px;
    background:#ccc;
    text-align:center;
    line-height:60px;
    text-decoration:none;
}

html

<a href="#" id="back-top">Top</a>

js

 $(function() {

     //先将#back-top隐藏
     $('#back-top').hide();

     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
     $(window).scroll(function() {
         if ($(window).scrollTop() > 100) {
             $('#back-top').fadeIn(1000);
         } else {
             $("#back-top").fadeOut(1000);
         }
     });

     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
     $("#back-top").click(function() {
         $('body').animate({
             scrollTop: '0'
         }, 1000);
         return false; //防止默认事件行为
     })
 })

html 和 css 直接写入到 js

 $(function() {

     //先将#back-top隐藏
     $('#back-top').hide();

     //当滚动条的垂直位置距顶部100像素一下时，跳转链接出现，否则消失
     $(window).scroll(function() {
         if ($(window).scrollTop() > 100) {
             $('#back-top').fadeIn(1000);
         } else {
             $("#back-top").fadeOut(1000);
         }
     });
    //html和css直接写入入到js, 注意转义字符`\"`
    $("body").append("<div id=\"back-top\" style=\"...\">^</div>");
     //点击跳转链接，滚动条跳到0的位置，页面移动速度是1000
     $("#back-top").click(function() {
         $('body').animate({
             scrollTop: '0'
         }, 1000);
         return false; //防止默认事件行为
     })
 })