jQuery Animate Method's Duration Property not working

Question

I'm trying to apply a smooth scroll animation on my webpage when the navbar links are clicked.

But the animate method isn't working and the links won't go to the next section when clicked thus leaving me stuck at the top most section when clicking the links.

I solved this by using the minified ver. of jQuery CDN instead of the slim minified.

Although the links go to their specified sections, the smooth scrolling effect still doesn't apply. They just skip to the next as though the duration property in my jQuery doesn't exist.

Am I doing something wrong here? I'm using Bootstrap 4 and I even tried including the jQuery UI CDN but it still doesn't work.

Also, I found this on my console output could this be the one that's causing the problem?

// Doesn't do the duration
$(".navbar a").click(function(e) {
  e.preventDefault();

  $("html, body").animate({
    scrollTop: $(this.hash).offset().top
  }, 1000);
});

<!-- The CDN's that I'm using -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

You will find some code using duration here that runs. https://stackoverflow.com/questions/17722497/scroll-smoothly-to-specific-element-on-page and here https://stackoverflow.com/a/31987330/3825777 Take a look at this fiddle for a slightly different approach. https://jsfiddle.net/s61x7c4e/ — react_or_angluar, Dec 20 '20 at 05:26

ColstonBod-oy · Accepted Answer · 2020-12-23T05:59:30.943

0

Changed the code to:

$(".navbar a").click(function(e) {
  e.preventDefault();
    
  document.querySelector(this.hash).scrollIntoView({
    behavior: "smooth" 
  });
});

here's the reference, thanks again! @jqueryHtmlCSS

edited Dec 23 '20 at 05:59

answered Dec 20 '20 at 06:48

ColstonBod-oy

63
1
6

Twisty · Answer 2 · 2020-12-20T21:59:43.850

0

I don't see an issue with your code. Testing here:

$(function() {
  function jumpTo(el, ms) {
    $("html, body").animate({
      scrollTop: $(el).offset().top - 2
    }, ms);
  }

  $(".navbar a").click(function(e) {
    e.preventDefault();
    jumpTo(this.hash, 1000);
  });
});

.navbar,
.content {
  padding-top: 10px;
}

.content {
  height: 1400px;
}

.article {
  width 95%;
  height: 340px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 10px;
}

#bar-1 {
  background: #ccd;
}

#bar-2 {
  background: #cdc;
}

#bar-3 {
  background: #dcc;
}

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<a id="top"></a>
<div class="navbar">
  <a href="#bar-1">Bar 1</a>
  <a href="#bar-2">Bar 2</a>
  <a href="#bar-3">Bar 3</a>
</div>
<div class="content">
  <div id="bar-1" class="article">Bar 1</div>
  <a href="#top">Back to Top</a>
  <div id="bar-2" class="article">Bar 2</div>
  <a href="#top">Back to Top</a>
  <div id="bar-3" class="article">Bar 3</div>
  <a href="#top">Back to Top</a>
</div>

Seems smooth to me.

edited Dec 20 '20 at 21:59

answered Dec 20 '20 at 21:42

Twisty

30,304
2
26
45

oh yea wth i dunno why it doesn't work on me maybe it's because I'm using bootstrap? or not i really dunno – ColstonBod-oy Dec 22 '20 at 06:51
@MoJoex3 any errors in your console? Bootstrap could be related. You didn't mention that in your OP. – Twisty Dec 22 '20 at 15:32
oh yea i forgot to check. Here it is: https://i.stack.imgur.com/A4XMF.png. It won't scroll when I'm using the slim minified ver. of the CDN and although it does on the minified ver., it doesn't apply the duration. – ColstonBod-oy Dec 23 '20 at 05:18
Iv'e included the console output as well on my post I'm really curious as to why this happens. – ColstonBod-oy Dec 23 '20 at 06:52

jQuery Animate Method's Duration Property not working

2 Answers2