移動端H5頁面返回頂部按鈕無效問題的解決

一直都是在PC端寫返回頂部的按鈕,今天的項(xiàng)目是移動端,頁面內(nèi)容比較多,也有滾動頂部的功能,于是一開始用了原生的的寫法,沒有用,經(jīng)過調(diào)試,滾動時獲取不到滾動的高度。接著又換了一個gototop.js插件,還是無效,同樣獲取不到距頂部的高度。
用了2個小時調(diào)試了這個移動端返回頂部的按鈕事件,最后經(jīng)調(diào)試發(fā)現(xiàn)是$(window).scroll()$(window).scrollTop()高度不變,但是 $('body').scroll()$('body').scrollTop()高度會隨著滾動變化,body換成window 解決了,
下面附上代碼,為下次使用方便:
html部分:

 <!-- 滾動到頂部 -->
      <div class="goTop" id="js-go_top"><img src="./images/icon_top.png" alt="回到頂部"></div>

css部分:

/* 公共的浮窗 滾動到頂部 */
.goTop {
  position: fixed;
  right: 1%;
  bottom: 10%;
  width: 1rem;
  height: 1rem;
  z-index: 999;
}
.goTop > img {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

js部分:

// 滾動到頂部
$(function() {
  $('.goTop').hide();
  $('body').scroll(function() {
    if ($('body').scrollTop() >= 600) {
      $('.goTop').fadeIn(300);
    } else {
      $('.goTop').fadeOut(300);
    }
  });

  $('.goTop').click(function() {
    $('html,body').animate({ scrollTop: '0px' }, 200);
  });
});

這個一個簡單實(shí)用的小demo,可以直接復(fù)制使用哦,一起加油哦

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容