前端页面点击按钮跳转回顶部的几种方法

最近写动画突然想到了这个【其实并没有什么联系

• 使用scrollIntoView

  document.querySelector(’#content’).scrollIntoView(true)

• 使用设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置

  window.scrollTo(0,0)
  
  

带动画效果的：

• 使用setInterval

const timer = setInterval(() => {
    
    
        const isSpeed = Math.floor(-this.scrollTop / 10)
        document.body.scrollTop = document.documentElement.scrollTop = this.scrollTop + isSpeed
        if (this.scrollTop == 0) {
    
    
          clearInterval(timer)
        }
      })

• requestAnimationFrame

const _this = this
      let timer = null
      timer = requestAnimationFrame(function fn () {
    
    
        if (_this.scrollTop > 0) {
    
    
          document.body.scrollTop = document.documentElement.scrollTop = _this.scrollTop - 50
          timer = requestAnimationFrame(fn)
        } else {
    
    
          cancelAnimationFrame(timer)
        }
      })

滑动出现按钮

mounted () {
    
    
    window.addEventListener('scroll', this.showScrollBtn)
  },
methods: {
    
    
	showScrollBtn () {
    
    
	      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	      if (this.scrollTop > 200) {
    
    
	        $('#scroll_btn').show('slow')
	      } else {
    
    
	        $('#scroll_btn').hide('slow')
	      }
	    }
}