gpt4 book ai didi

javascript - jQuery ScrollTo 在 Chrome 中不起作用

转载 作者:搜寻专家 更新时间:2023-10-31 22:32:02 25 4
gpt4 key购买 nike

我正在创建一个水平滚动的网站。我正在使用 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)。

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

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

谢谢。

最佳答案

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

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

另外你还得改

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

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

关于javascript - jQuery ScrollTo 在 Chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14546002/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com