Javascript auto-scroll to div

Question

so ive been looking at different articles on stack overflow and can't seem to find what im looking for.

So I just realized that the css property scroll-behavior doesn't work on safari/ ios browsers. So now im thinking i should use javascript to solve this.

This is what ive tried but it doesn't actually scroll it still jumps to the section, which means the scrollIntoView isn't working. Any suggestions?

function subnav_link_click1(){
    var subnav_link_value = document.getElementById('subnav_link_id1').href;
    subnav_link_value.scrollIntoView(true)
}

why are you doing `.href` when selecting the element ? Plus you should call it like this `element.scrollIntoView({behavior: "smooth"})` — Nicolae Maties, Sep 23 '20 at 11:49
You may want to think about using jQuery, as it has this very nifty "animate" function, plus several built-in functions (like *toggle* and/or fadeIn/Out). Also for animated scrolling, you can find a solution (I use a version of this) here: https://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery — ControlAltDel, Sep 23 '20 at 12:02
im using .href so i can scroll to the href link value typed in instead of hard coding the div value in. I've now tried this subnav_link_value.scrollIntoView({behavior: "smooth"}); and it still doesnt work. hmmm.... — ddd, Sep 23 '20 at 12:12

score 0 · Answer 1 · answered Sep 23 '20 at 11:55

const scrollUp = () => {
   const anchorEl = document.getElementById('myId');
  anchorEl.scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 1000px;
  display: flex;
}

.container .btn-holder {
  display: flex;
}

<div class="container">
 <a href="https://google.com" id="myId">google</a>
 <button class="btn-holder" onclick="scrollUp()">scroll up</button>
</div>

You have an example of how it should work here.

Scrollintoview - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

ye i cant get that to work either. also scrollIntoViewOptions aren't compatible on ios .... is this possible? it seems like it should be — ddd, Sep 23 '20 at 12:29

Javascript auto-scroll to div

1 Answers1