Jquery scroll to href is not working

Question

I want to scroll to div when I click on anchor tag. I have anchor tag , when I click on this anchor tag it should scroll to div i.e, is having a id called section1.But it is showing like 'Uncaught TypeError: Cannot read property 'top' of undefined', Please somebody help me.

Below is code,

HTML code,

<div id="section1">
SECTION1
</div>

Jquery,

<a class="down" href="#section1"></a>
  $(".down").click(function() {
      $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1500);
 });

Answer 1

this does not refer to your anchor in this context, it refers to either html or body depending on what is returned by that selector.

You could try the following:

$(function(){

    // Attach a click listener to all anchors with the "down" class
     $('a.down').click(function(e){

        // Keep some variables by
        var $a = $(this),
            href = $a.attr('href'),
            $elem = $(href);
          
        // If the first character of our href is a hash sign
        // and the target element exists on the page
        if( href[0] === '#' && $elem.length ){

             // Prevent the default behaviour
            e.preventDefault();

            // and scroll down to our target element
            $('html, body').animate({ scrollTop: $elem.offset().top });
        }
        
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="down" href="#section1">Section 1</a>
<div id="section0">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, commodo in ultricies id, feugiat eget ante. In hac habitasse platea dictumst. Curabitur non ipsum tincidunt, tempor nibh eget, finibus ligula. Ut tempor quam ut libero lobortis, eget fringilla ex lacinia. Nulla laoreet sapien vel nisl vehicula pellentesque eu sed justo. In a ullamcorper elit. Sed aliquam velit ut maximus consectetur. Sed nisi neque, volutpat sed lorem sed, volutpat tempor magna. Proin sollicitudin ornare ornare. Nam faucibus consectetur felis iaculis condimentum. Morbi ac ultrices lectus.

Donec ut consectetur ipsum. Sed lorem mauris, ultrices quis facilisis dapibus, vehicula ut lacus. Proin gravida malesuada magna nec fringilla. Duis vestibulum nulla erat, et sagittis leo pharetra a. Phasellus faucibus libero et eleifend hendrerit. Aenean id lorem odio. Nunc tortor purus, luctus at venenatis vel, porttitor id lectus. Aenean enim sem, auctor sit amet ligula vitae, mollis viverra leo. Sed eu ipsum faucibus velit malesuada sagittis nec ut eros. Nullam porta diam at purus mollis, vitae rutrum libero pellentesque. Donec tristique sagittis lacus in maximus. Cras posuere, sem non ultrices volutpat, risus dui ultricies magna, at lobortis ante ipsum eu dolor. Cras interdum pulvinar magna ac luctus.

In vitae gravida arcu. Donec sit amet arcu turpis. Pellentesque rutrum, dui eget consequat varius, lorem nulla aliquet lectus, quis vestibulum quam risus nec velit. Praesent in diam diam. Vivamus auctor in mi vel elementum. Cras aliquet hendrerit felis ullamcorper ultricies. Aliquam condimentum porta pretium. Aenean quis ullamcorper risus. Proin ultricies sem vitae mi consectetur mollis. Integer elementum ornare dui sed consequat.

Sed congue sem eros, convallis consequat dui tempor vitae. Quisque iaculis nisi ac mauris venenatis rutrum. Etiam aliquet, ipsum et sollicitudin pulvinar, magna felis ornare lacus, in malesuada massa orci viverra mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec volutpat ante. Vestibulum venenatis congue turpis sit amet fermentum. Sed lectus ante, pellentesque at laoreet id, fermentum vel diam. Cras tellus metus, efficitur in vehicula vitae, egestas nec velit. Vestibulum sollicitudin lectus a risus fringilla, vitae tincidunt dui sollicitudin. Ut gravida tellus ut ex rhoncus, vitae eleifend sapien mollis. Curabitur vel diam quis tortor suscipit ultricies.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, commodo in ultricies id, feugiat eget ante. In hac habitasse platea dictumst. Curabitur non ipsum tincidunt, tempor nibh eget, finibus ligula. Ut tempor quam ut libero lobortis, eget fringilla ex lacinia. Nulla laoreet sapien vel nisl vehicula pellentesque eu sed justo. In a ullamcorper elit. Sed aliquam velit ut maximus consectetur. Sed nisi neque, volutpat sed lorem sed, volutpat tempor magna. Proin sollicitudin ornare ornare. Nam faucibus consectetur felis iaculis condimentum. Morbi ac ultrices lectus.

Donec ut consectetur ipsum. Sed lorem mauris, ultrices quis facilisis dapibus, vehicula ut lacus. Proin gravida malesuada magna nec fringilla. Duis vestibulum nulla erat, et sagittis leo pharetra a. Phasellus faucibus libero et eleifend hendrerit. Aenean id lorem odio. Nunc tortor purus, luctus at venenatis vel, porttitor id lectus. Aenean enim sem, auctor sit amet ligula vitae, mollis viverra leo. Sed eu ipsum faucibus velit malesuada sagittis nec ut eros. Nullam porta diam at purus mollis, vitae rutrum libero pellentesque. Donec tristique sagittis lacus in maximus. Cras posuere, sem non ultrices volutpat, risus dui ultricies magna, at lobortis ante ipsum eu dolor. Cras interdum pulvinar magna ac luctus.

In vitae gravida arcu. Donec sit amet arcu turpis. Pellentesque rutrum, dui eget consequat varius, lorem nulla aliquet lectus, quis vestibulum quam risus nec velit. Praesent in diam diam. Vivamus auctor in mi vel elementum. Cras aliquet hendrerit felis ullamcorper ultricies. Aliquam condimentum porta pretium. Aenean quis ullamcorper risus. Proin ultricies sem vitae mi consectetur mollis. Integer elementum ornare dui sed consequat.

Sed congue sem eros, convallis consequat dui tempor vitae. Quisque iaculis nisi ac mauris venenatis rutrum. Etiam aliquet, ipsum et sollicitudin pulvinar, magna felis ornare lacus, in malesuada massa orci viverra mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec volutpat ante. Vestibulum venenatis congue turpis sit amet fermentum. Sed lectus ante, pellentesque at laoreet id, fermentum vel diam. Cras tellus metus, efficitur in vehicula vitae, egestas nec velit. Vestibulum sollicitudin lectus a risus fringilla, vitae tincidunt dui sollicitudin. Ut gravida tellus ut ex rhoncus, vitae eleifend sapien mollis. Curabitur vel diam quis tortor suscipit ultricies.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, commodo in ultricies id, feugiat eget ante. In hac habitasse platea dictumst. Curabitur non ipsum tincidunt, tempor nibh eget, finibus ligula. Ut tempor quam ut libero lobortis, eget fringilla ex lacinia. Nulla laoreet sapien vel nisl vehicula pellentesque eu sed justo. In a ullamcorper elit. Sed aliquam velit ut maximus consectetur. Sed nisi neque, volutpat sed lorem sed, volutpat tempor magna. Proin sollicitudin ornare ornare. Nam faucibus consectetur felis iaculis condimentum. Morbi ac ultrices lectus.

Donec ut consectetur ipsum. Sed lorem mauris, ultrices quis facilisis dapibus, vehicula ut lacus. Proin gravida malesuada magna nec fringilla. Duis vestibulum nulla erat, et sagittis leo pharetra a. Phasellus faucibus libero et eleifend hendrerit. Aenean id lorem odio. Nunc tortor purus, luctus at venenatis vel, porttitor id lectus. Aenean enim sem, auctor sit amet ligula vitae, mollis viverra leo. Sed eu ipsum faucibus velit malesuada sagittis nec ut eros. Nullam porta diam at purus mollis, vitae rutrum libero pellentesque. Donec tristique sagittis lacus in maximus. Cras posuere, sem non ultrices volutpat, risus dui ultricies magna, at lobortis ante ipsum eu dolor. Cras interdum pulvinar magna ac luctus.

In vitae gravida arcu. Donec sit amet arcu turpis. Pellentesque rutrum, dui eget consequat varius, lorem nulla aliquet lectus, quis vestibulum quam risus nec velit. Praesent in diam diam. Vivamus auctor in mi vel elementum. Cras aliquet hendrerit felis ullamcorper ultricies. Aliquam condimentum porta pretium. Aenean quis ullamcorper risus. Proin ultricies sem vitae mi consectetur mollis. Integer elementum ornare dui sed consequat.

Sed congue sem eros, convallis consequat dui tempor vitae. Quisque iaculis nisi ac mauris venenatis rutrum. Etiam aliquet, ipsum et sollicitudin pulvinar, magna felis ornare lacus, in malesuada massa orci viverra mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec volutpat ante. Vestibulum venenatis congue turpis sit amet fermentum. Sed lectus ante, pellentesque at laoreet id, fermentum vel diam. Cras tellus metus, efficitur in vehicula vitae, egestas nec velit. Vestibulum sollicitudin lectus a risus fringilla, vitae tincidunt dui sollicitudin. Ut gravida tellus ut ex rhoncus, vitae eleifend sapien mollis. Curabitur vel diam quis tortor suscipit ultricies.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, commodo in ultricies id, feugiat eget ante. In hac habitasse platea dictumst. Curabitur non ipsum tincidunt, tempor nibh eget, finibus ligula. Ut tempor quam ut libero lobortis, eget fringilla ex lacinia. Nulla laoreet sapien vel nisl vehicula pellentesque eu sed justo. In a ullamcorper elit. Sed aliquam velit ut maximus consectetur. Sed nisi neque, volutpat sed lorem sed, volutpat tempor magna. Proin sollicitudin ornare ornare. Nam faucibus consectetur felis iaculis condimentum. Morbi ac ultrices lectus.

Donec ut consectetur ipsum. Sed lorem mauris, ultrices quis facilisis dapibus, vehicula ut lacus. Proin gravida malesuada magna nec fringilla. Duis vestibulum nulla erat, et sagittis leo pharetra a. Phasellus faucibus libero et eleifend hendrerit. Aenean id lorem odio. Nunc tortor purus, luctus at venenatis vel, porttitor id lectus. Aenean enim sem, auctor sit amet ligula vitae, mollis viverra leo. Sed eu ipsum faucibus velit malesuada sagittis nec ut eros. Nullam porta diam at purus mollis, vitae rutrum libero pellentesque. Donec tristique sagittis lacus in maximus. Cras posuere, sem non ultrices volutpat, risus dui ultricies magna, at lobortis ante ipsum eu dolor. Cras interdum pulvinar magna ac luctus.

In vitae gravida arcu. Donec sit amet arcu turpis. Pellentesque rutrum, dui eget consequat varius, lorem nulla aliquet lectus, quis vestibulum quam risus nec velit. Praesent in diam diam. Vivamus auctor in mi vel elementum. Cras aliquet hendrerit felis ullamcorper ultricies. Aliquam condimentum porta pretium. Aenean quis ullamcorper risus. Proin ultricies sem vitae mi consectetur mollis. Integer elementum ornare dui sed consequat.

Sed congue sem eros, convallis consequat dui tempor vitae. Quisque iaculis nisi ac mauris venenatis rutrum. Etiam aliquet, ipsum et sollicitudin pulvinar, magna felis ornare lacus, in malesuada massa orci viverra mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec volutpat ante. Vestibulum venenatis congue turpis sit amet fermentum. Sed lectus ante, pellentesque at laoreet id, fermentum vel diam. Cras tellus metus, efficitur in vehicula vitae, egestas nec velit. Vestibulum sollicitudin lectus a risus fringilla, vitae tincidunt dui sollicitudin. Ut gravida tellus ut ex rhoncus, vitae eleifend sapien mollis. Curabitur vel diam quis tortor suscipit ultricies.
</div>
<div id="section1">
SECTION1
</div>

Answer 2

Don't know how you expect your jquery code to be executed, but bind it to a click on the link, and then it works.

$(".down").click(function() {
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 1500);
})

demo

$(".down").click(function() {
  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 1500);
})

#section1 {
  margin-top: 2000px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="down" href="#section1">scroll</a>

<div id="section1">
  SECTION1
</div>