Question

使用chrome和ff到目前为止使用scrollTo函数时出现了一个令人讨厌的故障？有谁知道如何防止这种情况发生？的 Live Code

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

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

Answer 1

您应该通过.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做任何正义。

Answer 2

使用.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();
});

如何防止滚动效果使我的屏幕在滚动时闪烁

2 个答案: