2

到目前为止，使用 chrome 和 ff 在使用 scrollTo 功能时产生了令人讨厌的故障？有谁知道如何防止这种情况发生？
实时代码

HTML

 <ul class="wrapper">
    <li class="listItem"><img src="asset/img/logo.png" ></li>
    <li class="listItem"><a onclick="scrollTo('#container',500);" href="#">Company</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('.flexslider-container',500);" href="#">Service</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#map',500);" href="#">Map</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#footer',500);" href="#">Contact</a></li>
    <li class="listItem">
      <p>250-610-9100</p>
    </li>
  </ul>

脚本 

<script type="text/javascript">
function scrollTo(o, s) {
    var d = $(o).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: d
    }, s);
}
</script>
4

2 回答 2

5

您应该通过 附加事件.on()，而不是将代码推入onclick属性。

（更多）正确的解决方案是为您提供链接class：

<a href="..." class="menu-link">...</a>

然后是一些花哨的data属性：

<a href="..." class="menu-link" data-target="#container" data-duration="500">...</a>

在您的代码中，添加以下内容：

$(document).ready(function() {
  $('.menu-link').on('click', function(event) {
    event.preventDefault();  // <---- This is the magic stuff

    scrollTo($(this).data('target'), $(this).data('duration'));
  });
});

基本上，你给你的元素提供了可以用 jQuery.data()函数读取的特殊属性。然后，不是为每个链接添加一个函数调用，而是将一个魔术函数附加到所有链接。

如果您想保留当前代码 (ehh)，只需在每个属性return false;的末尾添加：onclick

<a onclick="scrollTo('.flexslider-container',300);return false;" href="#">Service</a>

这可以防止发生默认操作（滚动到页面顶部）。

我推荐我的第一个解决方案。如果您仅将 jQuery 发挥到其潜力的三分之一，那么您就没有为 jQuery 做任何正义。

于 2012-06-14T05:46:01.157 回答
0

用于.stop()清除动画队列

function scrollTo(o, s) {
        var d = $(o).offset().top;
        $("html:not(:animated),body:not(:animated)").stop().animate({
            scrollTop: d
        }, s);
    }

在谈论锚点时，您应该使用以下方法防止默认锚点行为preventDefault()：

$('.wrapper a').on('click', function(e){
    e.preventDefault();
});
于 2012-06-14T05:50:53.840 回答