文章/答案/技术大牛

发布

社区首页 >问答首页 >用javascript动态显示/隐藏回顶部按钮

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

Stack Overflow用户

提问于 2014-01-09 22:36:51

回答 4查看 14.3K关注 0票数 1

当用户滚动超过1000像素时，我很难找到Javascript代码来动态显示“返回到顶部”按钮。所有示例都使用jQuery，而我不能使用jQuery。任何帮助都将不胜感激。

javascript

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2014-01-09 22:43:04

当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";
    }
};

演示

票数 9

Stack Overflow用户

发布于 2014-01-09 22:47:07

使用JavaScript的Window.onscroll

    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/

票数 1

Stack Overflow用户

发布于 2019-08-02 05:28:46

我就是这样做的。当用户从文档顶部向下滚动超过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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21032676

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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