网站添加简单的返回顶部特效

首先引入JS代码：

[JavaScript] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$(function(){         //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失         $(function () {             $(window).scroll(function(){                 if ($(window).scrollTop()>100){                     $("#backtop").css("bottom","1px");                 }                 else                 {                     $("#backtop").css("bottom","-100px");                 }             });               //当点击跳转链接后，回到页面顶部位置             $("#backtop").click(function(){                 //$('body,html').animate({scrollTop:0},1000);         if ($('html').scrollTop()) {                 $('html').animate({ scrollTop: 0 }, 1000);                 return false;             }             $('body').animate({ scrollTop: 0 }, 1000);                  return false;                       });            });    });

CSS部分：

[CSS] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

backtop {     position: fixed;     right: 7.5%;     bottom: -100px;     z-index: 2;     overflow: auto;     width: 54px;     height: 54px;     border-top-right-radius: 50px;     border-top-left-radius: 50px;     background-image: url(返回顶部图片链接);     background-position: 0 0;     cursor: pointer;     -webkit-transition: all .5s ease-in-out;     -moz-transition: all .5s ease-in-out;     -o-transition: all .5s ease-in-out;     transition: all .5s ease-in-out;     -ms-transition: all .5s ease-in-out }

把效果图保存，上传到服务器然后修改CSS里的返回顶部图片链接即可！

html部分：

[HTML] 纯文本查看 复制代码

?

1	<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>