返回顶部按钮的制作

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

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

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

js代码：

$(window).scroll(function(){
    if($(window).scrollTop() >= 300){
        $(".goTop").fadeIn(300);
    }else {
        $(".goTop").fadeOut(300);
    }
});
$(".goTop").on("click",function(){
    $("html,body").animate({
        scrollTop:"0px"
    },700);
});

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

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

$(".goTop").on("touchstart",function(){
    $(".goTop a").css({
        background:"url(img/gotopd.gif) no-repeat",
        backgroundSize:"100% 100%"
    });
}).on("touchend",function(){
    $(".goTop a").css({
        background:"url(img/gotop.png) no-repeat",
        backgroundSize:"100% 100%"
    });
});

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