使用javascript动态显示/隐藏返回顶部按钮
[英]Dynamically show/hide back to top button with javascript
问题描述
I'm having a hard time finding a Javascript piece of code to dynamically show the Back to Top button when the user has scrolled, lets say, more than 1000 pixels.
当用户滚动超过 1000 个像素时，我很难找到一段 Javascript 代码来动态显示“返回顶部”按钮。 All examples use jQuery, and I can't use jQuery.所有示例都使用 jQuery，而我不能使用 jQuery。 Any help will be very appreciated.任何帮助将不胜感激。
4 个解决方案
解决方案1
9 已采纳 2014-01-09 22:43:04
Set the CSS when pageOffset is a certain point (in a window.onscroll event):当pageOffset为某个点时设置 CSS（在window.onscroll事件中）：
window.onscroll = function()
{
if(pageOffset >= 1000)
{
document.getElementById('backToTopID').style.visibility="visible"
}
};
something more full would be:更完整的东西是：
window.onscroll = function()
{
if(pageOffset >= 1000)
{
document.getElementById('backToTopID').style.visibility="visible"
}else
{
document.getElementById('backToTop').style.visibility="hidden";
}
};
解决方案2
1 2014-01-09 22:47:07
JavaScript using Window.onscroll使用 Window.onscroll 的 JavaScript
var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">↑<\/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;
}
}
};
source来源
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll
demo link演示链接
解决方案3
1 2019-08-02 05:28:46
This is how I do it.我就是这样做的。 To show back to top button when user scrolls more than 150 pixels down from top of document.当用户从文档顶部向下滚动超过 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>
OR to show back to top button when user scrolls more than 150 pixels up from bottom of document.或者当用户从文档底部向上滚动超过 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>
解决方案4
1 2020-01-02 17:25:40
Simple but working.简单但有效。
CSS: CSS：
#scrollToTop { visibility: hidden; }
JavaScript: 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';
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.