在JS中如何實現回到頂部效果-js教程-PHP中文網

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

亚连

發布： 2018-06-14 17:28:02

原創

1493 人瀏覽過

這篇文章主要為大家詳細介紹了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>