滚动到顶部按钮在 IE 中不起作用答案

【问题标题】：Scroll to top button is not working in IE滚动到顶部按钮在 IE 中不起作用
【发布时间】：2021-04-10 04:19:03
【问题描述】：

我在 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/

【问题讨论】：

考虑改用scrollTo？
会发生什么？有没有给出任何错误信息？
@evolutionxbox scrollTo 在 IE 中不受支持
@NicoHaase 问题是，IE 没有显示任何错误，它根本没有向我的按钮添加类，并且滚动根本不起作用。这是奇怪的行为。尽管在其他浏览器中它可以正常工作。
请添加minimal reproducible example，我们在说什么IE？ IE 11、8、...？

标签： javascript scrolltop

【解决方案1】：

只需使用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>

【讨论】：

问题是，我并没有为滚动事件而苦苦挣扎，但主要是因为没有添加类，与单击事件一样不起作用，我不知道为什么会发生..
您的代码是否包含在DOMContentLoaded 或类似事件中？查看更新。

【解决方案2】：

使用锚元素。

在页面顶部：
<div id="top"></div>

按钮：
<a href="#top">Go to Top</a>

然后设置超链接样式

【讨论】：