jQuery ScrollTo 在 Chrome 中不起作用答案

【问题标题】：jQuery ScrollTo does not work in ChromejQuery ScrollTo 在 Chrome 中不起作用
【发布时间】：2014-02-27 00:49:22
【问题描述】：

我正在创建一个水平滚动的网站。我正在使用this jQuery 插件进行自动滚动。下面是代码。

HTML

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container">

<div id="navigation">
    <ul>
        <li>
            <div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
        </li>
    </ul>
</div><!-- end of navigation -->


<div id="firstMark"></div>

<div id="secondMark"></div>

<div id="thirdMark"></div>

</div>

</body>
</html>

CSS

@charset "utf-8";

ul li { list-style-type:none; }

/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }

.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }

.menubutton:hover { cursor:pointer; }

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }


#container {
    position:absolute;
    width:10000px;
    height:100%;
    background-color:#FFC;  
    top:0;
    left:0;
}

#firstMark {
    position:absolute;
    width:1px;
    height:1px;
    left:3000px;    
}

#secondMark {
    position:absolute;
    width:1px;
    height:1px;
    left:6000px;    
}

#thirdMark {
    position:absolute;
    width:1px;
    height:1px;
    left:9000px;    
}

JavaScript

$(document).ready(function(e) {

    $('#homeLink').click(function(e) {
        e.preventDefault();
        $.scrollTo(0,0, {duration: 2000});
    });

    $('#aboutLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#firstMark', {duration: 2000});
    });

    $('#musicLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#secondMark', {duration: 2000});
    });

});

这是演示页面的link。这适用于 Firefox(v18)、Opera(v12)、Safari(v5.1.2) 甚至 Internet Explorer 9，但不适用于 Chrome(v24)。

谁能告诉我这里缺少什么？是我的代码有问题还是插件有错误？

如果做不到这一点，请告诉我是否有任何其他替代自动滚动的方法，它也支持水平滚动。

谢谢。

【问题讨论】：

有趣的是，StackOverflow 使用了 chat 中过时的 ScrollTo，这意味着每次有人说话时，整个屏幕都会从顶部滚动。

标签： javascript jquery html jquery-plugins scrollto

【解决方案1】：

老问题，但我会写下我的经验。我从http://flesler.blogspot.com/2007/10/jqueryscrollto.html下载的那个插件也有同样的问题

文章中的那个插件已经过时了，你可以在这里下载最新版本：https://github.com/flesler

你也必须改变

$.scrollTo(0,0, {duration: 2000});

到

$.scrollTo("0px","0px", {duration: 2000});

【讨论】：

【解决方案2】：

您的主播可能正在接收click 事件而不是 div。

快速尝试一下：

$('#homeLink a').click(function(e) {
    e.preventDefault();
    alert('click');
    $.scrollTo(0,0, {duration: 2000});
});

我还添加了一个alert('click')，以便您判断它是否被检测到。

【讨论】：

试过了。它也没有工作。这样做也会禁用其他浏览器中的滚动。
是的，也是。没有出现警报。
这表明您的定位存在问题。
但在其他浏览器中也可以。此问题仅在 Chrome 中出现
在 Chrome 中为我工作，我刚刚通过 chrome 检查器在您的网页上尝试过。

【解决方案3】：

尝试使用 px 会滚动值

改变

 $.scrollTo(0,0, {duration: 2000});

到

 $.scrollTo(0px,0px, {duration: 2000});

【讨论】：

duration 是一个时间元素（秒）。
这样更好，不过现在可能需要引号。
@diggersworld 是对的。但是那条线的作用是滚动到开头。我希望其他链接也能正常工作。

【解决方案4】：

这个错误在于 webkit 的动画身体能力。相反，在 body 内部创建一个 div 并将动画应用到这个...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

注意：根据我的个人经验，ID 可以同样有效地应用于标签而不是多余的，这仍然有效......我在这个例子中只是这样做了因为一些用户注意到 DOM 树上的目标 ID 比这更高的问题......我无法亲自重现这个问题，所以嘿，无论哪种方式都有效！

然后设置包装元素和主体的样式以使其行为正确

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

然后是 jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});

【讨论】：