Question

如果有人问我，请原谅我，但我一直在这里搜索，并且没有看到任何与我的具体问题相关的问题。

我正在建立一个单页视差式网站，其导航栏使用固定位置，以便用户快速跳转到页面的不同部分。

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

为简单起见，锚点指向位于页面上的div，即：

<!-- GROUP 2 -->
<div id="group2" class="parallax__group">   
    <div class="parallax__layer parallax__layer--base">
        Lorem Ipsum
    </div>      
</div><!-- end GROUP 2 -->

希望有人能抓住我失踪的小而轻松的东西。谢谢。要明确的是，我并没有要求替代我正在使用的脚本。我正在寻求帮助，找到阻止任何平滑滚动脚本在我的网站上运行的根本问题。

Answer 1

更改代码以滚动.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});
    });
});

Answer 2

此代码片段需要jquery和jquery UI，如果您不想包含jquery UI，则可以删除末尾的缓动部分

    $(document).ready(function(){
  $('#nav ul li a').on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');

    //changing the value of offsetValue will help account for fixed headers or whatever.
    //EDIT: used data-offset to allow for multiple offsets defualt is 0.

    offsetValue = $(this).data('offset') | 0;

    $('html, body').animate({
      scrollTop: $(target).offset().top-offsetValue
     },
     {
      duration: 2000,
      easing: "easeOutQuint"  
      });
    //number at the end here changes the speed, slower = higher
  });
});

jQuery scrollTo无法使用Chrome / Firefox

2 个答案: