javascript jQuery ScrollTo 在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14546002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery ScrollTo does not work in Chrome
提问by Isuru
I'm creating a website with horizontal scrolling. I'm using thisjQuery plugin for automatic scrolling. Below is the code.
我正在创建一个水平滚动的网站。我正在使用这个jQuery 插件进行自动滚动。下面是代码。
HTML
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
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
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});
});
});
Here's the linkto a demo page. This works in Firefox(v18), Opera(v12), Safari(v5.1.2) and even Internet Explorer 9 but it doesn't work in Chrome(v24).
这是演示页面的链接。这适用于 Firefox(v18)、Opera(v12)、Safari(v5.1.2) 甚至 Internet Explorer 9，但不适用于 Chrome(v24)。
Can anybody tell me what's missing here? It it something wrong with my code or a bug in the plugin?
谁能告诉我这里缺少什么？是我的代码有问题还是插件中的错误？
Failing that, please tell me if there are any other alternatives to automatic scrolling which also supports horizontal scrolling.
如果做不到这一点，请告诉我是否还有其他支持水平滚动的自动滚动替代方案。
Thank you.
谢谢你。
回答by Emad
Old question but I'll write down my experience. I had the same issue with that plugin downloaded from http://flesler.blogspot.com/2007/10/jqueryscrollto.html
老问题，但我会写下我的经验。我从http://flesler.blogspot.com/2007/10/jqueryscrollto.html下载的插件也有同样的问题
That plugin in the article is outdated, you can download the latest version here: https://github.com/flesler
文章中的那个插件已经过时了，你可以在这里下载最新版本：https: //github.com/flesler
Also you will also have to change
你也将不得不改变
$.scrollTo(0,0, {duration: 2000});
$.scrollTo(0,0, {duration: 2000});
to
到
$.scrollTo("0px","0px", {duration: 2000});
$.scrollTo("0px","0px", {duration: 2000});
回答by diggersworld
Your anchor might be receiving the clickevent rather than the div.
您的主播可能正在接收click事件而不是 div。
Just give this a quick try:
快速尝试一下：
$('#homeLink a').click(function(e) {
e.preventDefault();
alert('click');
$.scrollTo(0,0, {duration: 2000});
});
I added an alert('click')as well so you can tell if it's been detected.
我还添加了一个alert('click')，以便您可以判断它是否已被检测到。
回答by Adil
Try using px will scroll value
尝试使用 px 将滚动值
Change
改变
$.scrollTo(0,0, {duration: 2000});
to
到
$.scrollTo(0px,0px, {duration: 2000});
回答by BenLeah
The bug is in webkit's ability to animate the body. Instead, create a div just inside body and apply the animation to this instead...
该错误在于 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"> </a>
<p>Some content<p>
</section>
<section>
<a id="section2"> </a>
<p>Some more content<p>
</section>
</div>
</body>
Note:In my personal experience, the ID could be just as effectively applied to the tag instead of a redundant and this still work ... I've only done it this way in this example because some users noted issues with targeting IDs higher up the DOM tree than this ... I couldn't personally recreate that problem, so hey, either way works!
注意：根据我的个人经验，ID 可以同样有效地应用于标签而不是多余的，这仍然有效......我在这个例子中只这样做是因为一些用户注意到定位 ID 更高的问题DOM 树比这...我个人无法重现那个问题，所以嘿，无论哪种方式都有效！
Then style the wrapper element and body to behave correctly
然后设置包装元素和主体的样式以使其行为正确
body { position:relative; }
.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }
Then the jQuery
然后是 jQuery
$('.scroll-to-id').on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('.wrapper').animate({
scrollTop: $(target).offset().top
}, 1500);
});
