Javascript jQuery滚动到不工作的Chrome/Firefox

Javascript jQuery滚动到不工作的Chrome/Firefox,javascript,jquery,html,google-chrome,scrollto,Javascript,Jquery,Html,Google Chrome,Scrollto,如果有人问我这个问题,请原谅,但我已经在这里搜索了一整天,没有看到任何与我的具体问题有关的问题 我正在建立一个单页视差风格的网站,其中有一个导航栏,利用固定的位置,允许用户快速跳转到页面的不同部分 目前,我正在尝试实现ScrollTojQuery插件(),以提供一个平滑的动画滚动 这是我实现的第五个或第六个不同的jQuery方法,它使这种效果起作用,但没有成功。scrollTo方法似乎最接近工作状态,但仍然无法工作 它在Chrome 42.0.2311.90上根本不起作用 它在Firefox 3

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

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

目前,我正在尝试实现ScrollTojQuery插件(),以提供一个平滑的动画滚动

这是我实现的第五个或第六个不同的jQuery方法,它使这种效果起作用,但没有成功。scrollTo方法似乎最接近工作状态,但仍然无法工作

它在Chrome 42.0.2311.90上根本不起作用 它在Firefox 37.0.2上根本不起作用 它在Safari 5.1.10上确实可以工作,但我还没有检查Safari的最新版本。此外,该网站还没有在Safari 5.1.10上正确呈现。我还没有使用IE访问过计算机

试验场地位于

下面是我如何调用脚本的:

$(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 -->

乱数假文

希望有人能抓住我错过的小而简单的东西。谢谢说清楚一点,我并不是在要求我使用的脚本的替代方案。我请求帮助查找阻止任何平滑滚动脚本在我的站点上工作的根本问题。

此代码段需要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
  });
});

将代码更改为在
.parallax
元素上滚动:

$(document).ready(function() {
    $('#nav-links li a').click(function() {
        $('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
    });
});
(使用网页中的HTML)


为了浏览器兼容性,可以考虑更改<代码>高度:100VH;<在css中使用code>来代替

.height()

$(document).ready(function() {
    height = $(window).height();
    $('.parallax').css('height',height);
    $('#nav-links li a').click(function() {
        $('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
    });
});

为了简单起见,试着看看这支笔,也许在没有库的情况下实现它。我用那支笔中的代码片段替换了当前使用的scrollTo,但它不起作用。事实上,这让情况变得更糟,因为现在它甚至不会回到跳投的状态。有了scrollTo脚本,它不会顺利运行,但至少会跳转到div。您可以在测试站点看到它的运行情况。您是否更改了HTML结构?我很感激,但我不要求为我尝试使用的脚本提供替代脚本。正如我的问题所述,我已经尝试了5到6个不同的脚本,但都没有成功。网站代码中的某些内容导致平滑滚动脚本无法工作,因此我正在寻求帮助,以找到解决此潜在问题的方法。您是否包括必要的库?我打赌他们中的一些人需要jquery用户界面,尤其是使用easinghank的时候!这完美地解决了我的问题。至于高度的浏览器兼容性,您是否建议我删除
height:100vh
完全来自我的CSS,或者只是在它之外添加jQuery脚本?
vh
实际上似乎有,所以无论哪种方式,您都应该是安全的。如果您开始注意到它的问题,至少您知道有另一种方法可以获得视口高度:-)