最近做博客的时候做了一个返回顶部的按钮,这个功能其实很简单,不过有些地方还是要注意一下。
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属性才有效,目前还没找到原因。