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

Question

Button:

<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");
});

Now to display block after 200 px, i am using this code but it does not work:

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

Answer 1

• Don't use inline on* JavaScript handlers, same as you hopefully you don't use inline style CSS.
• Use $(window).scrollTop() to get the current scrollTop of your page
• Use .toggleClass() to toggle styles

 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>

Answer 2

You can use

document.documentElement.scrollTop 

but you have to test on your target system/browser. And/or add also your version like

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

Some additiona info can be found at enter link description here

ps vote for the other question/answers if they work for you :)