Jquery滚动到href不起作用

时间:2018-02-01 10:35:14

标签: jquery scroll

我想在点击锚标签时滚动到div。 我有锚标签,当我点击这个锚标签时,它应该滚动到div,即有一个名为section1的id。但是它显示为'未捕获的TypeError:无法读取未定义'的属性'top', 请有人帮助我。

以下是代码,

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);
 });

2 个答案:

答案 0 :(得分:1)

不知道您希望如何执行您的jquery代码,但将其绑定到链接上的点击,然后它才能正常工作。

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

<强>演示

&#13;
&#13;
#section1 {
  margin-top: 2000px
}
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

this在此上下文中未引用您的锚点,它会引用htmlbody,具体取决于该选择器返回的内容。

您可以尝试以下方法:

$(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>