0

I tried to make Scrollspy smooth scroll using bootstrap. This works, but the scroll target is wrong.

You can see my fiddle : http://jsfiddle.net/gdfqtLxh/12/

>> THIS SCREENSHOT <<

UPDATE VIDEO : https://youtu.be/pZCc90Dv5kw

If you click on the second menu, it will work well, but when you click on the third menu, it doesn't go to the right target.

This is my javascript..

$("#list-example a[href^='#']").on('click', function(e) {

// prevent default anchor click behavior
  event.preventDefault();

  // store hash
  var hash = this.hash;

  // animate
  $('.scrollspy-example').animate({
    scrollTop: $(hash).offset().top
  }, 300);

});

UPDATE VIDEO (Added some text) : https://youtu.be/921oDDaSZq0

Dhimas Kirana
  • 31
  • 3

1 Answers1

0

Your jsfiddle works correctly in Firefox but not in Chrome.

I replaced all your js and css links with bootstrap's original links in case they were outdated, and it works in Chrome now. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Check out this jsfiddle here: http://jsfiddle.net/h6nc9ro4/

I also took out your javascript code since it's not required.

souzan
  • 289
  • 1
  • 2
  • 14
  • Note: although it works, the correct active link isn't getting selected correctly. I'm still looking into that. – souzan Aug 05 '18 at 11:04
  • I use JavaScript to make the scroll smooth.. That's the problem.. If I don't add a smooth scroll, it will be normal like yours. – Dhimas Kirana Aug 06 '18 at 07:58
  • This answer may help you: https://stackoverflow.com/questions/32922813/simple-easing-on-bootstrap-scrollspy?rq=1 – souzan Aug 06 '18 at 08:01