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

Question

使用scrollTo函数时,使用chrome和ff到目前为止已经造成了一个令人讨厌的故障？有谁知道如何防止这种情况发生？
现场代码

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>

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做任何正义.