js返回頂部，加過渡效果

 

設置頁面y軸位置：

window.scrollTo(x, y);

 

核心代碼，以下代碼加到返回頂部按鈕點擊事件函數中即可：

1. 無固定時間，勻速向上

let scrollTop = window.pageYOffset;
// 每0.01秒向上移動100像素，直到小於或等於0結束
let timer = setInterval(() => {
    scrollTop -= 100;
    // 為負數，瀏覽器會不處理得
    window.scrollTo(0, scrollTop);
    if (scrollTop <= 0) {
        clearInterval(timer)
    }
}, 10)

 

2. 固定時間執行完勻速向上滑動(需計算以下每次向上多少像素)

// 到頂部完成時間0.5秒
let finished_time = 500;
// 每0.01秒向上運動一次
let interval_time = 10;
// 當前位置距離頂部距離
let scrollTop = window.pageYOffset;
// 計算每次間隔向上滑動多少像素
let top_pixel = scrollTop / finished_time * interval_time;
// 通過定時器進行間隔向上滑動
let timer = setInterval(() => {
    scrollTop -= top_pixel;
    // 為負數，瀏覽器會不處理得
    window.scrollTo(0, scrollTop);
    if (scrollTop <= 0) {
        clearInterval(timer)
    }
}, interval_time)

 

vue寫法：

// 封裝

// 全局方法，頁面或者容器(設置了overflow-y:scroll那種)滾動條到某個位置

Vue.prototype.$scrollTo = function({scrollTop, selector=undefined, duration=300}){

  // 每0.01秒運動一次，越小，效果越好(代表回調執行得次數也越多)

  let intervalTime = 10;

  // 當前位置距離頂部距離，沒有selector表示是頁面得，有是容器得

  let nowScrollTop = selector ? document.querySelector(selector).scrollTop : window.pageYOffset

  // 計算每次間隔向上滑動多少像素

  let PerPixel = (scrollTop - nowScrollTop) / duration * intervalTime

  // 方向，用於清除定時器結束判斷一項

  let direction = scrollTop > nowScrollTop ? 'down' : 'up'

  // 執行循環事件

  let timer = setInterval(() => {

    // 修改當前top值

    // 描述：向下時候有可能多出去，所以加個判斷，如果差值大於每次移動的值添加，否則直接到那個值即可

    if (Math.abs(nowScrollTop - scrollTop) > Math.abs(PerPixel)){

      nowScrollTop += PerPixel

    }else{

      nowScrollTop = scrollTop

    }

    // 偏移位置

    // 描述：有selector表示是容器里進行偏移，否則是頂級頁面偏移

    if (selector){

      document.querySelector(selector).scroll(0, nowScrollTop)

    }else{

      window.scrollTo(0, nowScrollTop)

    }

    // 到指定位置就清空定時器

    if (direction === 'down' ? nowScrollTop >= scrollTop : nowScrollTop <= scrollTop) {

      clearInterval(timer)

    }

  }, intervalTime)

}

// 調用

this.$scrollTo({
   selector: '.tab-swiper-item-Shop',
   scrollTop: 1500,
   duration: 300,
})

// selector 傳遞表示是某個div或容器，不傳遞表示是頂級頁面

// scrollTop 到哪個位置，單位像素

// duration整個頁面滾動到目標位置持續得時間