jQuery scrollTo無法正常工作Chrome/Firefox

如果詢問了這個問題，請原諒我，但我一直在這裏搜索，並且沒有看到任何與我的具體問題有關的問題。jQuery scrollTo無法正常工作Chrome/Firefox

我正在構建一個頁面視差風格的網站，其中包含一個使用固定位置的導航欄，以便用戶可以快速跳轉到頁面的不同部分。

目前我正在試圖實現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 -->

希望有人會抓到一些小而輕鬆的東西，我錯過了。謝謝。要清楚的是，我並沒有要求替代我正在使用的腳本。我在尋求幫助，以找到阻止我的網站上正常運行的平滑滾動腳本的潛在問題。

來源

2015-04-25 mmnewcomb

爲簡單起見，儘量看着這支筆，也許沒有一個圖書館HTTP實現它：/ /codepen.io/mccell/pen/DdyKl –

我將當前使用的scrollTo替換爲該筆中的代碼片，並且不起作用。這實際上使情況變得更糟，因爲現在它甚至不會回落到跳格。使用scrollTo腳本不會流暢，但至少會跳轉到div。你可以在測試網站上看到它的行動。 – mmnewcomb

你改變了HTML結構嗎？ –

更改代碼的.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}); 
    }); 
});

來源

2015-04-25 20:27:58 Und3rTow

非常感謝你！這完全解決了我的問題。至於瀏覽器對高度的兼容性，你會建議我從我的CSS中完全刪除'height：100vh;'還是僅僅添加jQuery腳本？ – mmnewcomb

'vh'實際上似乎具有[完全瀏覽器兼容性]（https://developer.mozilla.org/en/docs/Web/CSS/length#Browser_compatibility），所以您應該以任何方式安全。如果你開始注意到它的問題，至少你知道有另一種方法來獲得視口高度:-) – Und3rTow

這段代碼需要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 
    }); 
});

來源

2015-04-25 18:50:19

我很欣賞它，但我並沒有要求我嘗試使用其他腳本。正如我的問題所述，我嘗試了5或6種不同的腳本，但沒有成功。網站代碼中的某些內容導致無法順利滾動腳本工作，所以我正在尋找幫助來找到解決此潛在問題的方法。 – mmnewcomb

你是否包含必要的庫？我敢打賭，其中一些需要jQuery UI，特別是如果使用easing –

jQuery scrollTo無法正常工作Chrome/Firefox

回答

相關問題