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

Posted 2023-05-07

【中文标题】滚动到顶部按钮在 IE 中不起作用

【英文标题】：Scroll to top button is not working in 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、...？

【参考方案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> 然后设置超链接样式