整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 返回頂部實例

          大家介紹如何通過 JS/CSS 實現網頁返回頂部效果。

          CSS 按鈕樣式:

          #myBtn {

          display: none; /* 默認隱藏 */

          position: fixed;

          bottom: 20px;

          right: 30px;

          z-index: 99;

          border: none;

          outline: none;

          background-color: red; /* 設置背景顏色,你可以設置自己想要的顏色或圖片 */

          color: white; /* 文本顏色 */

          cursor: pointer;

          padding: 15px;

          border-radius: 10px; /* 圓角 */

          }

          var topBtn = document.getElementById('top');
          // 獲取視窗高度
          var winHeight = document.documentElement.clientHeight;
          window.onscroll = function () {
              // 獲取頁面向上滾動距離,chrome瀏覽器識別document.body.scrollTop,而火狐識別document.documentElement.scrollTop,這里做了兼容處理
              var toTop = document.documentElement.scrollTop || document.body.scrollTop;
              // 如果滾動超過一屏,返回頂部按鈕出現,反之隱藏
              if(toTop>=winHeight){
                  topBtn.style.display = 'block';
              }else {
                  topBtn.style.display = 'none';
              }
          }
          topBtn.onclick=function () {
              var timer = setInterval(function () {
                  var toTop = document.documentElement.scrollTop || document.body.scrollTop;
                  // 判斷是否到達頂部,到達頂部停止滾動,沒到達頂部繼續滾動
                  if(toTop == 0){
                      clearInterval(timer);
                  }else {
                      // 設置滾動速度
                      var speed = Math.ceil(toTop/5);
                      // 頁面向上滾動
                      document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
                  }
              },50);
          }

          標簽

          首先放出html

          <body>

          <contain class="test1">

          <a name="topAnchor"></a>

          <div id="top">我是頂部</div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          <div></div>

          </contain>

          <footer>

          <button id="backTop1">第一種方式回到頂部</button>

          <button id="backTop2">第二種方式回到頂部</button>

          <button id="backTop3">第三種方式回到頂部</button>

          </footer>

          </body>

          然后具體操作步驟如下

          1. 將a標簽放到指定元素的附近
          2. 然后通過點擊事件生成 a 標簽
          3. 觸發a標簽事件
          4. 刪除a標簽

          const backTop1 = document.getElementById("backTop1")


          backTop1.addEventListener("click", function (e) {

          let a = document.createElement("a")

          a.href = "#topAnchor"

          e.target.appendChild(a)

          a.onclick = function (e) {

          e.stopPropagation()

          }

          a.click()

          e.target.removeChild(a)

          })

          效果如下圖所示

          效果很明顯,在事件觸發之后,頁面立馬跑到的頂部,在交互性沒啥要求的時候,這種做法確實沒啥問題,不過要求高了之后就不行了,會顯得有些突兀。

          scrollTo()

          此 api 需要傳遞 DOM元素相對于window的 left 和 top 的距離,此例子僅展示簡單demo,只考慮 top 坐標

          當然它還有一個 behavior 參數,將其設置為 smooth 后,將會出現滑動效果 步驟如下:

          1. 計算目標元素距離頂部的距離
          2. 通過事件觸發

          代碼如下:

          const backTop2 = document.getElementById("backTop2")

          const TOP = document.getElementById("top")

          const y = TOP.offsetTop

          const backTop3 = document.getElementById("backTop3")

          backTop3.addEventListener("click", function (e) {

          window.scrollTo({ top: y, left: 0, behavior: 'smooth' })

          })

          效果如下圖所示

          從效果上來看,相較于a標簽,該api支持動畫,使得頁面更絲滑

          Element.scrollIntoView()

          該 api 相較于上一個,節點信息更加的明確,操作方法也更加的簡潔,更利于后續的維護

          代碼如下

          const backTop2 = document.getElementById("backTop2")

          const TOP = document.getElementById("top")

          backTop2.addEventListener("click", function (e) {

          TOP.scrollIntoView({ behavior: "smooth" })

          })

          效果如下圖所示

          從效果上來看,該api和scrollTo的作用是一致的,但是從代碼結構上來說,scrollIntoView會更加的簡潔

          以上三種方法是我目前比較常用的,如有不同之處,還望諸君不吝賜教!


          作者:pengpeng

          鏈接:https://juejin.cn/post/6906142651121139719

          來源:掘金

          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


          主站蜘蛛池模板: 日本不卡一区二区三区| 午夜福利国产一区二区| 亚洲AV日韩AV天堂一区二区三区| 精品国产高清自在线一区二区三区 | 国产丝袜一区二区三区在线观看| 亚洲国产美国国产综合一区二区 | 国产成人精品亚洲一区| 中文字幕在线不卡一区二区| 国产日韩一区二区三免费高清| 国产精品亚洲综合一区在线观看 | 亚洲va乱码一区二区三区| 国精产品一区一区三区免费视频| 精品一区二区AV天堂| 国语对白一区二区三区| 国精产品一区一区三区MBA下载| 蜜桃无码一区二区三区| 精品国产一区二区三区不卡| 无码av免费一区二区三区试看 | 91秒拍国产福利一区| 亚洲国产精品综合一区在线| 在线中文字幕一区| 亚洲国产视频一区| 另类国产精品一区二区| 国精产品一区一区三区有限公司| 影院成人区精品一区二区婷婷丽春院影视 | 国产一区二区三区美女| 国产精品视频无圣光一区| 国产在线一区二区三区av| 成人免费视频一区二区| 国产一区二区视频在线观看 | 日本夜爽爽一区二区三区| 亚洲国产综合无码一区二区二三区| 视频一区二区三区在线观看| 久久se精品一区二区影院| 精品国产福利第一区二区三区| 国产自产在线视频一区| 一区二区三区四区免费视频| 国产日本一区二区三区| 精彩视频一区二区| 国产精品无圣光一区二区| 国产精品一区二区久久精品|