源

Question

我很难找到一段Javascript代码，以便在用户滚动时动态显示“返回顶部”按钮，比方说，超过1000像素。所有示例都使用jQuery，我不能使用jQuery。任何帮助将非常感激。

Answer 1

当 pageOffset 是特定点（在window.onscroll事件中）时设置CSS：

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }
};

更多完整的内容将是：

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }else
    {
        document.getElementById('backToTop').style.visibility="hidden";
    }
};

<强> DEMO

Answer 2

使用Window.onscroll的JavaScript

    var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};

源

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

演示链接

http://jsfiddle.net/MA4dC/

Answer 3

这就是我的方法。当用户从文档顶部向下滚动超过150像素时，返回到顶部按钮。

//how to show back to top button when user scrolls more than 150 pixels down from top of document.
var toTopButton = document.querySelector("a");
toTopButton.style.display = "none";//by default should be hidden
document.querySelector('body').onscroll = function(){//whenever they scroll
  if (window.scrollY > 150)//if scroll is 150px from top
    toTopButton.style.display = "block";//if they scroll down, show
  else
    toTopButton.style.display = "none";//if they scroll up, hide
};

html {scroll-behavior: smooth;}
a {
background-color: #f00;
position: fixed;
bottom: 10px;
right: 10px;
}

<html>
<a href="#top">back to top</a>
<body id="top">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</body>
<html>

或当用户从文档底部向上滚动超过150个像素时显示回顶部按钮。

//how to show back to top button when user scrolls more than 150 pixels up from bottom of document.
var toTopButton = document.querySelector("a");
toTopButton.style.display = "none";
document.querySelector('body').onscroll = function(){
  if (window.innerHeight + 150 < document.body.offsetHeight)//if document long enough
    if (window.scrollY + window.innerHeight > document.body.offsetHeight - 150)//if scroll is 150px from bottom (if 'bottom of what we are looking at' is > than 'bottom of document - 150px earlier)
      toTopButton.style.display = "block";
    else
      toTopButton.style.display = "none";
};

html {scroll-behavior: smooth;}
a {
background-color: #f00;
position: fixed;
bottom: 10px;
right: 10px;
}

<html>
<a href="#top">back to top</a>
<body id="top">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</body>
<html>

Answer 4

简单但可行。

CSS：

#scrollToTop { visibility: hidden; }

JavaScript：

// Show/Hide the button
window.onscroll = function() {
    var pageOffset = document.documentElement.scrollTop || document.body.scrollTop,
        btn = document.getElementById('scrollToTop');
    if (btn) btn.style.visibility = pageOffset > 450 ? 'visible' : 'hidden';
};

使用javascript动态显示/隐藏回顶部按钮

4 个答案:

源

演示链接