Question

我有一个问题可能在之前得到解答，但我无法使代码工作。

我有<a href="#page-contact">，一旦用户点击它，它就会向下滚动（带动画）到ID为"page-contact"的div。它确实带我到表单但没有动画

以下是代码：

<li class=""><a href="#page-contact">Contact</a></li>


<section id="page-contact" class="page-contact">
</section>

 $('.page-contact').on('click', function(event) {
    var target = $(this.href);
    if( target.length ) {
       event.preventDefault();
       $('html, body').animate({
         scrollTop: $("#page-contact").offset().top
    }, "slow");
  }
});

Answer 1

一个原因是href属性返回锚的绝对路径，即"http://www.example.com#hash"。由于jQuery无法找到目标元素，因此集合的length为0，并且不会执行if块。

使用返回原始this.getAttribute('href') 属性的href 或返回hash属性的哈希段而不是href属性的href属性var target = $(this.hash); // $('#page-contact') 属性。

section

另请注意，您的点击处理程序绑定到目标 a元素，而不是$('li a').on('click', function(event) { var target = $(this.hash); if( target.length ) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, "slow"); } });元素。

{{1}}

Answer 2

$(this.href)无效的选择器，因此target变量始终为空，将var target = $(this.href);更改为var target = this.href;以获取链接

$(this.href) seletor work as。

$("http://stackoverflow.com/questions/29515247/scrolling-to-a-div-using-jquery#29515468")

＆gt;对象[]

 $('.page-contact').on('click', function(event) {
    var target = this.href;
    if( target.length ) {
       event.preventDefault();
       $('html, body').animate({
         scrollTop: $("#page-contact").offset().top
    }, "slow");
  }
});

Answer 3

其实真的很小......

$('.page-contact').on('click', function(event) {
     //..
};

您可以将其连接到目标div上的单击，而不是按钮。将事件连接到您的按钮所具有的类，它将起作用。

$('#scrollButton').on('click', function(event) {
    var target = $(this.hash);
    if( target.length ) {
        event.preventDefault();    
        $('html, body').animate({
            scrollTop: target.offset().top
        }, "slow");
    }
});

小提琴试试：http://jsfiddle.net/Macavity/xeqmnoLL/2/

Answer 4

您的选择器错误，请更改为：

$('a[href="#page-contact"]').on('click', function(event) {
    var target = this.getAttribute("href");
    if($(target).length) {
       event.preventDefault();
       $('html, body').animate({
           scrollTop: $("#page-contact").offset().top
       }, "slow");
    }
});

使用jquery滚动到div

4 个答案:

＆gt;对象[]