如何解决滚动到顶部按钮在 IE 中不起作用
我在 IE 中对滚动到顶部按钮的支持有问题。我不得不只使用原生 JS,不使用库和框架。我很难理解为什么它不起作用,甚至没有添加要显示的类,而不是说滚动本身的功能。我检查了 caniuse,似乎一切正常,但它不起作用。如有任何线索,将不胜感激。
// Scroll to top button logic
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
var rootElement = document.documentElement;
var TOGGLE_RATIO = 0.20;
function handleScroll() {
var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
scrollToTopBtn.classList.add("showBtn");
} else {
scrollToTopBtn.classList.remove("showBtn");
}
};
function scrollToTop() {
rootElement.scrollTop = 0;
};
scrollToTopBtn.addEventListener("click",scrollToTop);
window.addEventListener("scroll",handleScroll);
html { scroll-behavior: smooth; }
.content { height: 900px; background: #000; color: #fff; }
<main>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</main>
<button class="scrollToTopBtn showBtn">Top</button>
这是测试 https://jsfiddle.net/sorqefz9/
的小提琴解决方法
只需使用基本相同的 scroll
(MDN):
function scrollToTop() {
window.scroll({
top: 0,behavior: 'smooth'
});
};
var scrollToTopBtn;
var rootElement;
var TOGGLE_RATIO;
function handleScroll() {
var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
if ((rootElement.scrollTop / scrollTotal) > TOGGLE_RATIO) {
scrollToTopBtn.classList.add("showBtn");
} else {
scrollToTopBtn.classList.remove("showBtn");
}
};
function scrollToTop() {
window.scroll({
top: 0,behavior: 'smooth'
});
};
document.addEventListener("DOMContentLoaded",function(event) {
// Scroll to top button logic
scrollToTopBtn = document.querySelector(".scrollToTopBtn");
rootElement = document.documentElement;
TOGGLE_RATIO = 0.20;
scrollToTopBtn.addEventListener("click",scrollToTop);
window.addEventListener("scroll",handleScroll);
});
html { scroll-behavior: smooth; }
.content { height: 900px; background: #000; color: #fff; }
<main>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
</div>
</main>
<button class="scrollToTopBtn showBtn">Top</button>
使用锚元素。
在页面顶部:<div id="top"></div>
按钮:<a href="#top">Go to Top</a>
然后设置超链接的样式
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。