返回顶部按钮的制作

最近做博客的时候做了一个返回顶部的按钮，这个功能其实很简单，不过有些地方还是要注意一下。

html代码如下(css就不贴出来了)：

1 <div class="goTop"><a href="javascript:;" title="返回顶部"></a></div>

js代码：

 1 $(window).scroll(function(){
 2     if($(window).scrollTop() >= 300){
 3         $(".goTop").fadeIn(300);
 4     }else {
 5         $(".goTop").fadeOut(300);
 6     }
 7 });
 8 $(".goTop").on("click",function(){
 9     $("html,body").animate({
10         scrollTop:"0px"
11     },700);
12 });

有个地方需要注意的是html代码部分href属性需要加上“javascript:;”，目的是阻止a标签的默认行为，如果不加点击返回顶部按钮时会直接跳到网页顶部，没有动画效果。

另外，css中a:hover在移动端会有一些问题，主要表现在当点击a之后，hover效果会一直存在，所以自己也做了些兼容性处理：

 1 $(".goTop").on("touchstart",function(){
 2     $(".goTop a").css({
 3         background:"url(img/gotopd.gif) no-repeat",
 4         backgroundSize:"100% 100%"
 5     });
 6 }).on("touchend",function(){
 7     $(".goTop a").css({
 8         background:"url(img/gotop.png) no-repeat",
 9         backgroundSize:"100% 100%"
10     });
11 });

主要是绑定ontouchstart和ontouchend事件，但是刚开始的时候也遇到一个问题，最初我是直接通过addClass()和removeClass()去添加删除返回顶部的css类，但没有效果，只有直接在js代码中修改css属性才有效，目前还没找到原因。

转载于:https://www.cnblogs.com/NickyLi/p/6198525.html