JS實現(xiàn)帶動畫的回到頂部效果

更新時間：2017年12月28日 09:39:31 作者：夏爾_

這篇文章主要為大家詳細介紹了JS實現(xiàn)帶動畫的回到頂部效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)帶動畫的回到頂部效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)功能：滾動到頁面某一個高度的時候，回到頂部按鈕出現(xiàn)。點擊之后回到網頁頂部，按鈕隱藏。
代碼如下，jQuery引用的是百度CDN的，因此整段代碼復制下來后在瀏覽器運行即可。

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>實現(xiàn)回到頂部功能</title> 
  </head> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
     
    .gotop { 
      display: none; 
      position: fixed; 
      bottom: 50px; 
      right: 50px; 
      width: 40px; 
      height: 40px; 
      padding: 5px; 
      background-color: #F00; 
      color: #FFF; 
      text-align: center; 
      cursor: pointer; 
    } 
  </style> 
  <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> 
 
  <body> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
    <p>這是一段文字</p><br /><br /><br /><br /><br /><br /> 
 
    <div id="goTop" class="gotop"> 
      <p>回到</p> 
      <p>頂部</p> 
    </div> 
  </body> 
  <script> 
    function goTop() { 
 
      $(window).scroll(function() { 
        var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容瀏覽器 
        if($scrollTop > 100) { //滾動高度可調 
          $("#goTop").show(); 
        } else { 
          $("#goTop").hide(); 
        }; 
      }) 
 
      $("#goTop").on("click", function() { 
        $("body").stop().animate({ 
          scrollTop: 0 
        }); 
      }) 
 
    } 
 
    goTop(); 
  </script> 
 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: