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整个页面滚动到目标位置持续得时间