Question

我正在尝试使用平滑滚动创建单页网站以获得更好的用户体验，而我正在使用的代码无效，我无法弄清楚原因。

以下是我的JS ......

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

这是我菜单的HTML代码，这是顶部的固定位置......

<div class="menu">

<a href="#home" title="Home">Our Process</a>
<a href="#brand" title="Your Brand">Your Brand</a>
<a href="#print" title="Print Media">Print Media</a>
<a href="#web" title="Web Presense">Web Presence</a>
    <a href="#contact" title="Contact Us">Contact Us</a>

</div>

这里是“页面”的代码，分为1000px块，上面的菜单有填充...

<div id="home" class="page home-content" id="home-page">
    <a name="home" class="anchor"></a>
<div class="page-padding"></div>
<h3>Our Process</h3>
<p></p>
</div>

<div id="brand" class="page brand-content" id="brand-page">
<a name="brand" class="anchor"></a>
<div class="page-padding"></div>
<h3>Your Brand</h3>
<p></p>
</div>

<div id="print" class="page print-content" id="print-page">
<a name="print" class="anchor"></a>
<div class="page-padding"></div>
<h3>Print Media</h3>
<p></p>
</div>

<div id="web" class="page web-content" id="web-page">
<a name="web" class="anchor"></a>
<div class="page-padding"></div>
<h3>Web Presence</h3>
<p></p>
</div>

<div id="contact" class="page contact-content" id="contact-page">
<a name="content" class="anchor"></a>
<div class="page-padding"></div>
<h3>Contact Us</h3>
<p></p>
</div>

我正在使用Foundation框架，因此我不确定这是否存在干扰，但我已经注释掉了所有特定于Foundation的JS并且没有解决问题。此外，这是一个内部JS文件，我已经尝试添加到标题和正文的开头/结尾。我很难过。将很快添加JFiddle链接...感谢所有帮助人员！

的更新 的 http://jsfiddle.net/FbyVz/

JQuery平滑滚动代码无法正常工作

0 个答案: