您好,我正在尝试在网站上实现Ariel Flesler的scrollTo(),但似乎我太愚蠢而无法理解如何使用它。
这是代码
<!DOCTYPE html>
<head>
<title>
Penna 3d <!--da cambiare -->
</title>
<link href="assets/style/style.css" rel="stylesheet" >
</head>
<body>
<div id="dws-top">
<div class="wrapper">
<div id="logo">
<img src="#" alt="logo prodotto">
</div>
<nav>
<ul>
<li><a href="#dws-slide" id="slide">Slide</a></li>
<li><a href="#dws-teaser" id="teaser">Teaser</a></li>
<li><a href="#dws-explain" id="explain">Spiegazione</a></li>
<li><a href="#dws-info" id="info">info</a></li>
<li><a href="#dws-footer" id="footer" >footer</a></li>
</ul>
</nav>
</div>
</div>
<div id="dws-slide">
</div>
<div id="dws-teaser">
</div>
<div id="dws-explain">
</div>
<div id="dws-info">
</div>
<div id="dws-footer">
<footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.superscrollorama.js" type="text/javascript"></script>
<script src="assets/js/TweenMax.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.scrollTo.min.js" type="text/javascript"></script>
<script>
$('#footer').on("click", function(){
$.scrollTo("#dws-footer");
});
</script>
</footer>
</div>
</body>
好吧,如果我点击链接没有发生任何事情,我真的尝试了一切(我认为),但我真的没办法让这个插件工作。
我也尝试过animatescroll插件,这实际上是正常工作,但是如果我在同一个链接上第二次点击它会回滚到原来的位置...... 有人可以帮帮我吗?
答案 0 :(得分:0)
这是一个小伙伴:http://jsfiddle.net/vxx1echb/1/
您需要做的是在初始化方法中包含return false;
。原生div锚点href覆盖了scrollTo方法。您也可以将该链接更改为只有href
#
(尽管它不重要,因为return false;
无论如何都会覆盖默认行为,但只是为了澄清您的行为#39} ;不会通过href="#some-id"
链接。
然后你必须将scrollTo方法传递给你想要滚动到的实际jQuery对象,并将持续时间作为第二个参数传递,在本例中为500
(毫秒)。