首頁  >  文章  >  web前端  >  在JS中如何實現回到頂部效果

在JS中如何實現回到頂部效果

亚连
亚连原創
2018-06-14 17:28:021327瀏覽

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

本文實例為大家分享了JS實現帶動畫的回到頂部效果的具體程式碼,供大家參考,具體內容如下

實作功能:捲動到頁面某一個高度的時候,回到頂部按鈕出現。點擊之後回到網頁頂部,按鈕隱藏。
程式碼如下,jQuery引用的是百度CDN的,因此整段程式碼複製下來後在瀏覽器運行即可。

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title>实现回到顶部功能</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 /> 
 
    <p id="goTop" class="gotop"> 
      <p>回到</p> 
      <p>顶部</p> 
    </p> 
  </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>

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

Vue元件通訊(詳細教學)

#Vue Socket.io原始碼詳細分析

Javascript的日常錯誤

#

以上是在JS中如何實現回到頂部效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn