整合營銷服務商

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

          免費咨詢熱線:

          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区一区二区三| 欧美亚洲精品一区二区| 美女免费视频一区二区三区| 麻豆一区二区99久久久久| 视频一区视频二区日韩专区| 一区二区三区精密机械| 国产一区二区福利| 波多野结衣一区二区三区aV高清| 国产一区二区三区电影| 精品少妇人妻AV一区二区 | 无码人妻一区二区三区免费n鬼沢| 亚洲性日韩精品一区二区三区 | 亚洲日本精品一区二区| 国产在线精品一区二区夜色| 一区二区三区高清视频在线观看| 怡红院美国分院一区二区 | 中字幕一区二区三区乱码| 国产亚洲一区二区精品| 日本不卡在线一区二区三区视频| 国产精品综合AV一区二区国产馆 | 久久久久成人精品一区二区| 中文字幕久久久久一区| 中文字幕一区二区三区永久 | 无码aⅴ精品一区二区三区| 成人日韩熟女高清视频一区| 国产内射在线激情一区| 久久久久人妻精品一区蜜桃| 精品人妻码一区二区三区| 天堂资源中文最新版在线一区| 无码人妻AⅤ一区二区三区| 国产一区二区中文字幕| 日韩精品无码中文字幕一区二区| 乱子伦一区二区三区| 国产高清一区二区三区| 天堂一区二区三区精品| 日韩精品无码人妻一区二区三区| 中文字幕在线播放一区| 久久国产视频一区| 男人的天堂av亚洲一区2区| 日韩社区一区二区三区|