滚动到底部按钮仅在滚动超过 200 像素时显示答案

【问题标题】：Scroll to bottom Button show only if scroll more than 200px滚动到底部按钮仅在滚动超过 200 像素时显示
【发布时间】：2021-07-15 11:59:30
【问题描述】：

按钮：

<button onclick="scrollFunctionBottom()" id="hulk"><i class="ion-chevron-down"></i></button>

CSS

button#hulk {
    position: fixed;
    top: 55%;
    right: 35%;
    display: none;
}

JS：

$("#hulk").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

现在要在 200 像素后显示块，我正在使用此代码，但它不起作用：

function scrollFunction() {
  if (document.body.scrollTop > 200) {
   document.getElementById("#hulk").style.display = "block";
  }
}

【问题讨论】：

如何/在哪里打电话给scrollFunction()？
Roko C. Buljan's 下面的答案应该对您有所帮助。以防万一你想要香草 JS 解决方案：jsfiddle.net/bjmrvLw1

标签： javascript css scroll

【解决方案1】：

不要使用内联 on* JavaScript 处理程序，就像你希望不要使用内联 style CSS 一样。
使用$(window).scrollTop() 获取页面的当前滚动顶部
使用.toggleClass() 切换样式

const $hulk = $("#hulk");

const toggleHulk = () => {
  $hulk.toggleClass("is-active", $(window).scrollTop() > 200);
};

$hulk.on("click", function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
});

$(window).on("scroll", toggleHulk);

body {height: 300vh; border: 4px dashed;}

#hulk {
  position: fixed;
  top: 55%;
  right: 35%;
  display: none;
}

#hulk.is-active {
  display: block;
}

<button id="hulk">Scroll Down</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

【讨论】：

【解决方案2】：

你可以使用

document.documentElement.scrollTop

但您必须在目标系统/浏览器上进行测试。和/或添加您的版本，例如

if ((document.documentElement.scrollTop || document.body.scrollTop)>200) {
}

一些额外的信息可以在enter link description here找到

附言如果其他问题/答案对您有用，请投票给他们:)

【讨论】：