javascript - jQuery scrollTo 不工作 Chrome/Firefox

标签 javascript jquery html google-chrome scrollto

如果有人问过这个问题,请原谅我,但我一直在这里搜索一整天,没有看到任何与我的具体问题有关的问题。

我正在构建一个带有导航栏的单页视差式网站,导航栏利用固定位置允许用户快速跳转到页面的不同部分。

目前我正在尝试实现 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)

为了浏览器的兼容性,您可以考虑更改 height: 100vh;在你的 CSS 中可能使用 .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/

相关文章:

javascript - 使用JS进行水平视差滚动

javascript - 在 jQuery 中,您将如何根据从下拉列表中选择的月份来增加年份

javascript - 使用 jQuery 获取单元格的值

javascript - 未定义不是函数(AJAX,PHP,jQuery)

jquery - 禁用/取消绑定(bind)点击事件元素,不活动时重新绑定(bind)点击

javascript - 你如何重构 JavaScript、HTML、CSS 等?

javascript - 创建密码扰码器

javascript - 如何使用JavaScriptCore将错误记录到XCode?

jquery - CSS - 根据包含的文本宽度更改 DIV 宽度

javascript - 如何处理动态引导卡的jQuery创建?