Question

我在使用Wordpress构建的网站上设置了一页滚动动画。

这是我用来实现动画滚动到所需目的地的脚本，这是通过点击锚链接来确定的：

<script type="text/javascript">

// Get the height of the header
var headerHeight = $("div#header").height() + 45;

// Attach the click event
$('a[href*=#]').bind("click", function(e) {
e.preventDefault();

var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - headerHeight;

$('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){
    window.location.hash = "" + target;
    // This hash change will jump the page to the top of the div with the same id
    // so we need to force the page to back to the end of the animation
    $('html').animate({ 'scrollTop': scrollToPosition }, 0);
});


});

</script>

<div id="menu-smallest" role="navigation">
<select id="mobi-menu" >
  <option value="#slider">HOME</option>
  <option value="#about">ABOUT</option>
  <option value="#nutricalm">GE NUTRICALM</option>
  <option value="#indications">INDICATIONS</option>
  <option value="#barrier">BARRIER SHAMPOO</option>  
  <option value="#contact">CONTACT</option>
</select>

问题是页面滚动动画适用于我测试的所有浏览器，除了在Chrome上，它只跳转到没有jquery动画的点击锚点。我假设这是一个webkit问题。任何想法如何解决这个问题？

谷歌浏览器问题与jquery页面滚动

0 个答案: