Scroll to bottom Button show only if scroll more than 200px

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

`Roko C. Buljan's` answer below should help you. Just in case if you want vanilla JS solution : https://jsfiddle.net/bjmrvLw1/ — Ismail Vittal, Jul 15 '21 at 12:21

score 1 · Accepted Answer · answered Jul 15 '21 at 12:18

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>

score 1 · Answer 2 · answered Jul 15 '21 at 12:29

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

p.s. vote for the other question/answers if they work for you :)

Scroll to bottom Button show only if scroll more than 200px

2 Answers2