jquery - 使用滚动单页网站

Question

我正在开发一个单页网站，但<a></a>标签有问题。

我希望当用户单击 Div 时，他们会被带到页面的不同部分。目前我有<a></a>这样做的。

    '<a href="#divid">About</a>'  

css-tricks.com/examples/SmoothPageScroll/#two 这是我用来滚动页面的一个很好的例子

但是每次我将这些标签放在我的 div 中的图像周围时，所有 div click 属性都会停止工作。例子：

<div id="about-button" class="button">
    <a href="#about"><img src="images/menu-about.png"
                          alt="about" class="button"/></a>
</div>

我可以说这是由于a标签位于 div 顶部而发生的。

我的问题是有没有办法让<a>标签位于或与 div 并排工作并且仍然有效？

或者如果没有办法做到这一点。我可以做的任何阅读或不使用''标签导航到页面特定部分的更好方法的示例

Answer 1

你可以尝试这样的事情：

$('a').click(function(e) {
   e.preventDefault();
   var scr = $('#target').offset().top; // top offset of the target element
    $('html, body').animate({scrollTop: scr}, 1000)
})

演示

Answer 2

与其尝试操纵 DOM 元素的工作方式，不如更改 jQuery 选择器更容易？http://api.jquery.com/parent-selector/