javascript - 如何防止 "scroll to top button"越过页脚-6ren

javascript - 如何防止 "scroll to top button"越过页脚

转载作者：行者123 更新时间：2023-12-04 17:07:31

强制滚动到顶部按钮不进入页脚的最简单方法是什么？我希望它始终保持在页脚上方，因为我计划在其中添加最终将覆盖的链接和文本。它应该在到达页脚之前停止并且不会再下降。

JSFiddle:https://jsfiddle.net/9s3kRT5tFBBHFVc8eT/9rwn1qub/5/

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
footer {
  margin: 100px;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible 
  <strong>when the user starts to scroll the page</strong>.</div>

<footer>
  This is a footer
</footer>

<script>
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

最佳答案

//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }

  // check that button is not lower than footer.
  let footerElement = document.getElementById('footer');
  let footerElementRect = footerElement.getBoundingClientRect();
  let mybuttonPositionBottom = mybutton.offsetTop + mybutton.offsetHeight;
  if (footerElementRect.y < mybuttonPositionBottom) {
    // if button is lower than footer.
    // modify css bottom.
    let diffheight = mybuttonPositionBottom - footerElementRect.y;
    let style = window.getComputedStyle(mybutton);
    let addBottom = parseInt(style.getPropertyValue('bottom')) + diffheight;
    mybutton.style.bottom = addBottom + 'px'; // maybe add more 10 px for bottom space of a button.
  } else {
    // if button is heigher than footer. this including scroll up.
    // remove custom css bottom.
    mybutton.style.bottom = '';
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

  <div style="background-color:black;color:white;padding:30px">Scroll Down</div>
  <div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
    <strong>when the user starts to scroll the page</strong>.</div>
  <div id="footer">
    This is footer.
  </div>
</body>

</html>

See it in action on jsfiddle

关于javascript - 如何防止 "scroll to top button"越过页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70240526/

文章推荐： javascript - 如何允许将 ES5 和 ES6 导入我的 npm 包？

文章推荐： javascript - 匹配包含单词的整个句子，即使句子跨越多行

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何防止 "scroll to top button"越过页脚