返回頂部的幾種實(shí)現(xiàn)

silvertheo 發(fā)布于2019-08-22 10:48 / 2774人閱讀

摘要：返回頂部這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動(dòng)高度切換顯示隱藏，的樣式可以自己設(shè)計(jì)。

返回頂部的按鈕大家并不陌生，針對長滾動(dòng)條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗(yàn)，而返回頂部的實(shí)現(xiàn)也是多種多樣，本文分享幾個(gè)案例并給出評(píng)價(jià)

作為引子講一個(gè)常用的案例，對與不知道的作為一個(gè)小彩蛋吧！對于微博與微信朋友圈的返回頂部可以雙擊最頂部的區(qū)域（包含時(shí)間，網(wǎng)絡(luò)，電量）來返回頂部

大家見過哪些創(chuàng)意的返回頂部呢？歡迎留言交流，下面進(jìn)入正文

直接跳轉(zhuǎn)的方式

對于追求極簡的方式達(dá)到預(yù)期效果的人可能會(huì)喜歡這種方式，不托泥帶水也不用考慮兼容問題

國內(nèi)的大站如新浪主頁,淘寶網(wǎng),京東,百度新聞

不難發(fā)現(xiàn)此類的大站為了兼容性與瀏覽器渲染速度選擇了直接跳轉(zhuǎn)的方式，實(shí)現(xiàn)基本含兩種方式

命名錨點(diǎn)跳轉(zhuǎn)的方式

用錨點(diǎn) #top（可變）返回到頂部預(yù)設(shè)的 id 為 top（可變）的元素，或者在頁面頂部的 a 標(biāo)簽 name 屬性值為 top（可變），新版本的瀏覽器（chrome等）默認(rèn)支持 #top 錨點(diǎn)返回頂部且不需要前面所提條件，但是前面條件的優(yōu)先級(jí)大于默認(rèn)跳轉(zhuǎn)。

上面說的有些繞口，下面逐句解釋，讀明白且理解的可以直接看下節(jié)

返回頂部

頂部

上面代碼包含了所有的描述，簡單易懂，下面說下優(yōu)先級(jí)，這個(gè)是關(guān)鍵，避免無意中犯了錯(cuò)誤卻無從下手

注意: id > name > 默認(rèn)

不建議大家用默認(rèn)的方式，具體有兼容問題和優(yōu)先級(jí)低的問題，id 與 name 均可，但要注意命名沖突

scroll 函數(shù)跳轉(zhuǎn)

window.scroll(x, y) 方法，x 是水平滾動(dòng)位置，y 是垂直滾動(dòng)位置，必須兩個(gè)參數(shù)都給進(jìn)去不然會(huì)報(bào)錯(cuò)，大家可能發(fā)現(xiàn)有 window.scrollY，這里只改變垂直方向的滾動(dòng)為什么不能用，一個(gè)方面它返回的不是函數(shù)無法傳參，另一方面無法被賦值

返回頂部

這里方便展示，實(shí)際不建議在標(biāo)簽內(nèi)使用 js，可以調(diào)用一個(gè)方法，簡單易懂。

setTimeout 模擬滾動(dòng)動(dòng)畫

setTimeout() 方法遞歸調(diào)用，改變滾動(dòng)條距頂部位置

function backTop () {
  window.scrollBy(0, -100)

  scrolldelay = setTimeout("backTop()", 10)

  var sTop = document.documentElement.scrollTop + document.body.scrollTop

  if (sTop === 0) {
    clearTimeout(scrolldelay)
  }
}

注意優(yōu)化網(wǎng)頁資源，使用不當(dāng)會(huì)非?？D，可以通過調(diào)節(jié) setTimeout 的第二個(gè)參數(shù)來控制滾動(dòng)速度(回調(diào)時(shí)間單位 ms)，下面解釋聲明sTop 變量的寫法

獲取scrollTop值，聲明了DTD的標(biāo)準(zhǔn)網(wǎng)頁取 document.documentElement.scrollTop，否則取 document.body.scrollTop 因?yàn)槎咧挥幸粋€(gè)會(huì)生效，另一個(gè)就恒為 0，所以取和值可以得到網(wǎng)頁的真正的 scrollTop 值

注：非標(biāo)準(zhǔn)版（webkit 內(nèi)核）采用的是 document.body.scrollTop

window.requestAnimationFrame

window.requestAnimationFrame() 這個(gè)方法是用來在頁面重繪之前，通知瀏覽器調(diào)用一個(gè)指定的函數(shù)，以滿足開發(fā)者操作動(dòng)畫的需求。這個(gè)方法接受一個(gè)函數(shù)為參，該函數(shù)會(huì)在重繪前調(diào)用。

完整的文檔看 MDN 和 JavaScript 標(biāo)準(zhǔn)參考教程（alpha），里面有詳細(xì)描述和兼容性詳情

看過文檔發(fā)現(xiàn) requestAnimationFrame 適合用于連續(xù)的動(dòng)畫，而我們的需求與連續(xù)動(dòng)畫關(guān)系大嗎？我們不妨一試。

const isWebkit = navigator.userAgent.toLowerCase().match(/webkit/([d.]+)/)
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

function backTop () {
  let move = window.scrollY
  let span = move / 15

  function step () {
    if (document.documentElement.scrollTop + document.body.scrollTop > 0) {
      if (isWebkit) {
        document.body.scrollTop -= 300
      } else {
        document.documentElement.scrollTop -= 300
      }

      requestAnimationFrame(step)
    } else {
      return
    }
  }

  requestAnimationFrame(step)
}

上面代碼為什么定義 move 與 span 這里是方便計(jì)算速度，粘貼代碼運(yùn)行你會(huì)發(fā)現(xiàn)滾動(dòng)的距離越大速度就會(huì)越快，反而會(huì)越慢

這種用法本質(zhì)上可以使動(dòng)畫更加流暢，但是重點(diǎn)在于頁面優(yōu)化，requestAnimationFrame是在主線程上完成。這意味著，如果主線程非常繁忙，requestAnimationFrame的動(dòng)畫效果會(huì)大打折扣。

借助 jQuery

目前的前端把焦點(diǎn)從 jQuery 移到了 MVVM 框架，不論如何當(dāng)初的 jQuery 對于 DOM 操作與低版本瀏覽器兼容貢獻(xiàn)巨大。如果你即考慮兼容性又想要流暢的動(dòng)畫可以繼續(xù)使用 jQuery。

function backTop (minHeight) {
  var backTopHtml = "返回頂部"

  $("#page").append(backTopHtml)

  $("#backTopBtn").click(function () {
    $("html, body").animate({scrollTop: 0}, 700)
  }).hover(
    function () {
      $(this).addClass("hover")
    },
    function () {
      $(this).removeClass("hover")
    }
  )

  minHeight ? minHeight = minHeight : minHeight = 600

  $(window).scroll(function () {
    var s = $(window).scrollTop()

    if (s > minHeight) {
      $("#backTopBtn").fadeIn(100)
    } else {
      $("#backTopBtn").fadeOut(100)
    }
  })
}

backTop()

這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動(dòng)高度切換顯示隱藏，hover 的樣式可以自己設(shè)計(jì)。

總結(jié)

總結(jié)了幾種返回頂部的方式，orange 認(rèn)為滾動(dòng)或跳轉(zhuǎn)對用戶體驗(yàn)并沒有影響（影響用戶體驗(yàn)的是有沒有返回頂部的按鈕），既然選擇了返回頂部的按鈕那么性能一定是第一位的，一味追求滾動(dòng)動(dòng)畫導(dǎo)致頁面滾動(dòng)過程中卡頓進(jìn)而影響了整個(gè)網(wǎng)頁的用戶體驗(yàn)，在這個(gè)細(xì)節(jié)上負(fù)面的例子太多不一一列舉。

總之本文的用意除了闡述各個(gè)方法的用法外還想提醒大家在前端開發(fā)中細(xì)節(jié)才是致命的，orange 也一直在踩坑，說到聰明的大廠為什么選用跳轉(zhuǎn)，哈哈，先回去看看負(fù)面教材給我們的教訓(xùn)就知道了，技術(shù)點(diǎn)不在于滾動(dòng)，而在于整個(gè)網(wǎng)頁的優(yōu)化，如果你的網(wǎng)站優(yōu)化的足夠好，那么拿滾動(dòng)來炫技沒人會(huì)反對。

文章出自 orange 的 個(gè)人博客 http://orangexc.xyz/

GPU云服務(wù)器云服務(wù)器最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類型 js緩存的幾種方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91291.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

silvertheo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

怎么設(shè)置虛擬主機(jī)映射-中興，光纖貓F(tuán)420虛擬主機(jī)如何配置？

閱讀 3771·2021-09-22 15:49
什么是性能測試？性能測試目的？性能測試的主要分類以及性能測試的常用指標(biāo)？

閱讀 3317·2021-09-08 09:35
leaflet 入門視頻

閱讀 1430·2019-08-30 15:55
前端面試每日 3+1 —— 第127天

閱讀 2332·2019-08-30 15:44
JavaScript常見的六種繼承方式

閱讀 722·2019-08-29 16:59
grid布局快速入門

閱讀 1608·2019-08-29 16:16
DIV+CSS IE6/IE7/IE8/FF兼容問題匯總

閱讀 491·2019-08-28 18:06
Reflect 通過反射獲取自定義注解值給另外一個(gè)對象賦值

閱讀 903·2019-08-27 10:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

返回頂部的幾種實(shí)現(xiàn)

相關(guān)文章