如果有人问过这个问题,请原谅我,但我在这里搜索了一整天,没有发现任何与我的具体问题相关的问题。
我正在构建一个单页视差式网站,其中的导航栏使用固定位置,以允许用户快速跳转到页面的不同部分。
目前我正在尝试实现 scrollTo jQuery 插件 ( flesler/jquery.scrollTo - Github ) 以提供漂亮流畅的动画滚动。
这是我实现的第 5 种或第 6 种不同的 jQuery 方法,但没有成功。 scrollTo 方法似乎最接近工作,但它仍然无法工作。
它在 Chrome 42.0.2311.90 上根本不起作用 它在 Firefox 37.0.2 上根本不起作用 它确实适用于 Safari 5.1.10,但我无法检查最新版本的 Safari。此外,该网站还不能在 Safari 5.1.10 上正确呈现。我也无法访问装有 IE 的计算机。
测试站点位于http://revolt-designs.com/parallax/
这是我调用脚本的方式:
$(document).ready(function(){
$('#nav-links li a').click(function() {
$.scrollTo($(this).attr('href'), {duration: 3000});
});
});
链接的格式是这样的:
<div id="nav">
<ul id="nav-links">
<li><a href="#group2">About</a></li>
<li><a href="#group4">News</a></li>
<li><a href="#group6">Events</a></li>
<li><a href="#group7">Contact</a></li>
</ul>
</div>
为了简单起见, anchor 指向页面上的div,即:
<!-- GROUP 2 -->
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
Lorem Ipsum
</div>
</div><!-- end GROUP 2 -->
希望有人能捕获我所缺少的小而简单的东西。谢谢。需要明确的是,我并不是在要求替代我正在使用的脚本。我正在寻求帮助,找出阻止任何平滑滚动脚本在我的网站上运行的潜在问题。
最佳答案
更改代码以在 .parallax
元素上滚动:
$(document).ready(function() {
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
Here is a fiddle (使用您网页中的 HTML)
为了浏览器兼容性,您可以考虑更改您的 css 中的 height: 100vh;
以使用 .height()
代替:
$(document).ready(function() {
height = $(window).height();
$('.parallax').css('height',height);
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
关于javascript - jQuery scrollTo 不工作 Chrome/Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29868238/