最近做博客的時候做了一個返回頂部的按鈕，這個功能其實很簡單，不過有些地方還是要注意一下。

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

總結

以上是生活随笔為你收集整理的返回顶部按钮的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。