[英]How to make my scroll to top button appear after scrolling
我的滚动到顶部按钮工作正常，但我希望该按钮仅在向下滚动约 20 像素后出现。 我以为我的 javascript 代码有问题，但在网上搜索后，我找到了相同的代码，但仍然无法正常工作。 相反，在滚动 20px 后，该按钮仅在我刷新时出现。 我仍然不知道问题是什么，但我认为这是因为我使用的是 PHP 模型视图控制器 (MVC) 框架，因为我创建了一个测试 Html 文件并在那里尝试了相同的代码并且它起作用了。 代码如下：
var scrollTop = document.getElementById("scrollTop"); window.onscroll = function(){ scrollfunction() }; function scrollfunction(){ if( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){ scrollTop.style.display = "block"; } else { scrollTop.style.display = "none"; } } scrollTop.addEventListener("click", function(){ window.scrollTo({ left: 0, top: 0, behavior: "smooth" }) })
/*Scroll to top button*/ #scrollTop{ font-size: 380%; right: 30px; bottom: 30px; width: 5%; height: 10%; text-align: center; position: fixed; border: 1px solid rgb(0, 0, 255); background-color: rgb(183, 183, 255); color: rgb(0, 0, 255); cursor: pointer; transition: 0.5s; text-decoration: none; } #scrollTop:hover{ background-color: rgb(123, 123, 255); transition: 0.5s; } #scrollTop:active{ background-color: rgb(0, 0, 148); }
<p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <p>Some default text</p> <button id="scrollTop"> <i class="fas fa-arrow-up"></i> </button>只需将 default display:none添加到您的滚动顶部按钮，因此默认情况下它是隐藏的
其余代码看起来不错
var scrollTop = document.getElementById("scrollTop"); window.onscroll = function(){ scrollfunction() }; function scrollfunction(){ if( document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){ scrollTop.style.display = "block"; } else { scrollTop.style.display = "none"; } } scrollTop.addEventListener("click", function(){ window.scrollTo({ left: 0, top: 0, behavior: "smooth" }) })
.content{ height:2000px; } /*Scroll to top button*/ #scrollTop{ display:none; font-size: 380%; right: 30px; bottom: 30px; width: 5%; height: 10%; text-align: center; position: fixed; border: 1px solid rgb(0, 0, 255); background-color: rgb(183, 183, 255); color: rgb(0, 0, 255); cursor: pointer; transition: 0.5s; text-decoration: none; } #scrollTop:hover{ background-color: rgb(123, 123, 255); transition: 0.5s; } #scrollTop:active{ background-color: rgb(0, 0, 148); }
<body> <div class="content"> </div> </body> <button id="scrollTop"> <i class=""></i> </button>
如何仅在没有jquery的情况下开始向下滚动角度时如何显示滚动到顶部按钮
[英]How to make scroll to top button appear only when you have started scrolling down in angular without jquery
滚动到顶部元素不会在滚动后出现 - 它固定在底部
[英]Scroll to the top element does not appear after scrolling - its fixed on the bottom
当页面的预定部分出现时，如何使滚动到顶部按钮出现？
[英]How do I make a scroll to top button appear when a pre-determined part of the page appears?
在谷歌表单中按下提交按钮后如何使页面滚动到顶部？
[英]How to make page scroll to top after submit button is pressed in google form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.