scroll to anchor isn't scrolling smooth

Question

I have a link:

<a href="#cat2" class="scrollto">Cat 2</a>

and an anchor:

<a name="cat2"></a>

this is my js

      $(document).ready(function () {
          $('.scrollto').click(function () {
              var aTag = $(this).attr('href');
              $('html,body').animate({
                  scrollTop: aTag.offset().top
              }, 600);
              return false;
          });
      });

could someone pls help me fix this problem?

What do want to do? can you please clear your problem? @emjay — Tuhin, Apr 23 '14 at 13:53
Try going through [this solution](http://stackoverflow.com/a/7717572/2174170) — Dumisani, Apr 23 '14 at 13:56
please check answers. Please read through mine as I explain with Vanilla and it's library jQuery... — EasyBB, Apr 23 '14 at 14:43

Aaroniker · Accepted Answer · 2014-04-23T14:03:07.060

1

this wont work scrollTop: aTag.offset().top cause "aTag" isn't jquery, you have to wrap the variable with $() : like this: $(aTag).offset().top

then replace name="cat2" with id="cat2"

HTML:

<a href="#cat2" class="scrollto">Cat 2</a>

<a id="cat2"></a>

jQuery:

 $(document).ready(function () {
          $('.scrollto').click(function () {
              var aTag = $(this).attr('href');
              $('html,body').animate({
                  scrollTop: $(aTag).offset().top
              }, 600);
              return false;
          });
 });

jsFiddle: http://jsfiddle.net/rtXjd/

edited Apr 23 '14 at 14:03

answered Apr 23 '14 at 13:54

Aaroniker

170
10
31

all this for a heavy library... We can change `scrollTop:` to aTag.offsetTop as well as aTag itself to be `this.href;` stop using jQuery for the simple things – EasyBB Apr 23 '14 at 13:56
1

@JayBlanchard aTag is not jQuery so you'd have to wrap the object in a jQuery wrapper hence why the only thing he changed was `$(aTag)` but in my comment above what I said is faster than using the jQuery library. You can use it for some stuff don't use it for everything. know when to use and not use jQuery – EasyBB Apr 23 '14 at 13:58
I know that @EasyBB, but the poster should explain it so that the OP can understand what is going on rather than just saying "this wont work". Also, if you know when not to use jQuery make a post demonstrating the solution with it and explain that to the OP. – Jay Blanchard Apr 23 '14 at 13:59

Tuhin · Answer 2 · 2014-04-23T14:31:14.973

1

change

<a name="cat2"></a>

to

<a id="cat2"></a>

and jQuery>

$('#cat2').click(function(e){

        e.preventDefault();

        $('html, body').animate({

            scrollTop: $($(this).attr('href')).offset().top
        }, 500);
        return false;
    });

Updated

edited Apr 23 '14 at 14:31

answered Apr 23 '14 at 13:56

Tuhin

3,335
2
16
27

Tell the OP why this works as opposed to what they were doing. – Jay Blanchard Apr 23 '14 at 14:01
This wouldn't work. Firstly you cannot define a variable within the animate method. Secondly, even if you could, scope for this would essentially be html,body. Move "aTag" variable to be before animate – marcjae Apr 23 '14 at 14:05
It would... if the click event listener was attached to the 'scrollto' class. – marcjae Apr 23 '14 at 14:56

EasyBB · Answer 3 · 2014-04-23T14:43:04.753

HTML:

  <a href="#cat2" rel="cat2" class="scrollto">Cat 2</a> <!--Add a rel attribute-->

  <a id="cat2"></a>

jQuery:

 $(function () {
       $('.scrollto').click(function () {
          var aTag = document.getElementById(this.rel);
                     //I used Vanilla JS with rel tag as to get the ID correctly
          $('html,body').animate({
              scrollTop: aTag.offsetTop //then use Vanilla to get the offsetTop
          }, 600);
         //if JavaScript is turned off the link will still 
         //snap to the correct area
         //also this method doesn't add the #cat2 to the url causing history
         //issues
         return false;
      });  
  });

Test Bin http://jsbin.com/pohamesu/5

NOTE

Why use Vanilla JavaScript with jQuery? Well this will help to lower our codes weight, Vanilla JavaScript has easy methods for selectors such as document.getElementById and the other method to get the offsets aTag.offsetTop why use jQuery for these small methods. Only use jQuery for major stuff that may help with cross compatibility. Doc Loads, Selectors (class and elements and CSS3 selectors), also there are many of the jQuery methods that we shouldn't use if you know how to write both languages. Yes jQuery is a library though it becomes its own language as it is different than it's predecessor.

marcjae · Answer 4 · 2014-04-23T14:48:22.080

The reason your initial code was not working was because you were basically trying to get an offset of a string (in this case - the href). Where jQuery is expecting an object. Can learn more about selectors here: https://api.jquery.com/category/selectors/

You can do this without changing your HTML structure. To do so, update:

scrollTop: aTag.offset().top

To:

scrollTop: $("[name="+aTag.split('#')[1]+"]").offset().top

Although using an ID would probably be easier since you would not need to remove the # from the string or use an attribute for the selector.

scroll to anchor isn't scrolling smooth

4 Answers4