Bootstrap v4: only update scroll when clicking nav for scrollspy

Question

I am learning Bootstrap v4 via w3schools. (A lot of their bootstrap tutorials are almost copy-paste from the source though.)

Nonetheless, let the MWE for this question be the vertical scrollspy found here (but the horizontal one also works): https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp

As you see, both of them function great ... when you only scroll.

If you click on the navbar to jump to that section, your position in the text also moves. That is very disorienting and undesired.

What function do I overwrite or how do I make it such that:

when a user clicks on a nav item linked with scrollspy, the scrollable area scrolls to that point, with out the jump.

Can you please post the code to repro the issue in the question? External links that may change over time are not desirable. "include the code in your question itself. Not everyone can access external sites, and the links may break over time" — Carol Skelly, Mar 19 '18 at 17:19

score 1 · Accepted Answer · answered Mar 19 '18 at 17:26

1

You can use a jQuery smooth scroll function as explained here, or in modern browsers use the CSS scroll-behavior property like this...

html{
  scroll-behavior:smooth;
}

answered Mar 19 '18 at 17:26

Carol Skelly

+1 for the simple answer. It appears my pre-google for answers was not thorough enough. Still a bit of a jump, but drastically improved. – SumNeuron Mar 19 '18 at 18:29

1 Answers1