原生JS点击滚动到指定位置

背景：新接手的一个项目做一个一页展示的官网，只有头部导航，中间一个图片加一个按钮，还有一个footer。

需求：点击main区域的按钮滚动到二维码显示区域，问题是所在区域并不是搭建出来的而是在背景图片上，用锚点就麻烦了，所以就采用了改变offsetTop来实现滚动。

需求解析：我们要滚动到指定位置，首先要知道要位置距离顶部的距离，这个可以自己去量取。当我们知道这个距离的时候就很容易实现了，在我们实现之前先要知道不同浏览器如何去写才能改变滚动条的位置，看代码：

 document.documentElement.scrollTop //IE浏览器
 window.pageYOffset //Safari浏览器
 document.body.scrollTop //opera，FireFox

此时想要滚动到指定位置就只需要赋值给它就行了。但是这样的效果并不友好，所以我们可以加个setInterval来让整个过程更友好一点，看代码：

let timer = setInterval(() => {
      document.documentElement.scrollTop += A
      if (document.documentElement.scrollTop === B) {
        clearInterval(timer)
      }
    }, 20); //记得要做浏览器兼容，我只写一个

这里是每20毫秒document.documentElement.scrollTop += A，当document.documentElement.scrollTop === B 时清除定时器。到这里我们算是友好的实现了如何滚动到指定位置。

但是在实际使用中就会发现问题，document.documentElement.scrollTop += A 实际上是在已滚动的基础上在加上这么多，会造成最终滚动的距离是想要滚动的距离加上了已经滚动的距离（自我感觉这个地方是有问题但是我又想不出来问题出在哪，大家如果在使用过程中发现了这个问题请麻烦告知我，我及时改正，抱歉）。

所以在实际运用中我们需要找一个参照点来有效的无误的实现这个滚动，看代码：

	let btn = document.getElementById('btn'); 
    let x = btn.offsetTop ;

这里是获取到了id = btn元素距离顶部的距离，如果要滚动到这个位置就只需要把这个值赋值个document.documentElement.scrollTop，如果像我一样要滚动到地方没有元素，就找一个已有元素做参照，例如滚动的距离btn下方的1000px处就只需let x = btn.offsetTop + 1000;即可，我写的方法如下：

function upload() {
    let btn = document.getElementById('main_btn'); 
    let x = btn.offsetTop + 1200;
    if (!!u.match(/AppleWebKit.*Mobile.*/)) {   //判断是否在移动端打开的
      x = btn.offsetTop + 400;
    }
    let timer = setInterval(() => {
      document.documentElement.scrollTop += 100
      if (document.documentElement.scrollTop >= x) {
        clearInterval(timer)
      }
    }, 20);
    let timer_1 = setInterval(() => {
      window.pageYOffset += 100
      if (window.pageYOffset >= x) {
        clearInterval(timer_1)
      }
    }, 20);
    let timer_2 = setInterval(() => {
      document.body.scrollTop += 100
      if (document.body.scrollTop >= x) {
        clearInterval(timer_2)
      }
    }, 20);
  }

希望以上内容对你有所帮助，上述内容中有任何错误之处希望在您查看之时能够之处，小菜及时改正，谢谢。

项目地址：点击体验，这个页面也适配了移动端 也可以在手机上打开体验