滚动到使用纯 JAVASCRIPT 没有（jquery）的网站的顶部链接答案

【问题标题】：Scroll to top link for website using pure JAVASCRIPT without(jquery)滚动到使用纯 JAVASCRIPT 没有（jquery）的网站的顶部链接
【发布时间】：2017-01-10 14:32:59
【问题描述】：

我希望网站正常滚动到顶部。

滚动到顶部的链接出现在页面底部（靠近页脚），只有在鼠标向下滚动 200px 后才可见，并且在滚动回到顶部时应该隐藏。没有JQUERY

这里是demo

在这个演示中，回到顶部已经在底部。有没有办法显示我上面提到的修复的顶部链接？

【问题讨论】：

我认为这个答案会对你有所帮助：link

标签： javascript html

【解决方案1】：

如果你想让它尽可能简单，只需使用：

<a href="#" onClick="window.scrollTo(0,0)">

这会将您滚动到您网站的顶部。

【讨论】：

【解决方案2】：

对于这种情况，MDN docs 留下了一个很棒的解决方案，我们现在可以使用以下示例：

const el = document.getElementById('the-scroll-box');

el.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth', // or can get `auto` variable
});

behavior 如果有smooth 值，滚动运动是平滑的如果有auto 值运动发生在一跳。

【讨论】：

【解决方案3】：

这就是答案

HTML

<a id="scroll_to_top_id"></a>

CSS

#scroll_to_top_id {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background
}

纯 JAVASCRIPT（无 JQUERY）

/*
 *  Scroll To Top
 */

var your_header        = document.getElementById('header_id'),
    scroll_to_top   = document.getElementById('scroll_to_top_id');


window.onscroll = function(ev) {

    var  scrollTop = window.pageYOffset || document.body.scrollTop;
    if (scrollTop > your_header.offsetHeight + 100) {

        scroll_to_top.style.display = 'block';
    }
    else{
        scroll_to_top.style.display = 'none';   
    }
};

scroll_to_top.onclick = function () {
    scrollTo(document.body, 0, 100);
}

/*
 *  scroll to body top
 *  element, position and time duration
 */
function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

【讨论】：