jQuery使用動畫順利滾動到div

概述： 我正在使用錨標籤滾動到它們各自的div，如href中所分配的。jQuery使用動畫順利滾動到div

HTML標記：

<ul class="nav navbar-nav"> 
    <li><a href="#howToUse">How to use</a></li> 
    <li><a href="#benefits">Benefits</a></li> 
</ul> 

<div id="howToUse"> 
    Some content 
</div> 

<div id="benefits"> 
    Some content 
</div>

的jQuery：

$('ul.nav').find('a').click(function(){ 
    var $href = $(this).attr('href'); 
    var $anchor = $('#'+$href).offset(); 
    $('body').animate({ scrollTop: $anchor.top },'slow'); 
    return false; 
});

問題： 所以，現在當我點擊錨標記上的窗口滾動到特定的div但滾動不平滑或緩慢。我寧願說它根本就不滾動。它只是跳到那個div。

我已經使用了動畫，並且使用了慢的參數。那麼，我的錯誤是什麼？我怎樣才能實現我在這裏尋找的平滑滾動。

網站：

http://irankmedia.com/uskincare/

您好請導航欄本網站不給我平滑滾動效果我期待。

希望它會帶來一個清晰的想法。

來源

2015-07-21 Kiran Dash

嘗試'$（ 'ul.nav'）找到（ 'A'）點擊。（函數（e）{e.preventDefault（）;' – atmd

@Kiran Kumar Dash語法錯誤，無法識別的表達式：## howToUse會在那裏由於$（'＃'+ $ href） –

問題是$('#'+ $href).offset();，因爲href本身具有#，它拋出這樣的錯誤Uncaught Error: Syntax error, unrecognized expression: ##howToUse

$('ul.nav').find('a').click(function (e) { 
    e.preventDefault(); 
    var target = $(this).attr('href'); 
    var $anchor = $(target).offset(); 
    $('body').stop().animate({ 
     scrollTop: $anchor.top 
    }, 'slow'); 
});

演示：Fiddle

來源

2015-07-21 07:56:56

在我的情況下，它只是跳轉到div而不是滾動。我的問題是它不能順利滾動。因此，可能是什麼原因？ –

@KiranKumarDash因爲有一個腳本錯誤，動畫代碼沒有得到執行...所以錨點擊的默認動作正在發生 - 問題是https://jsfiddle.net/arunpjohny/dctnbo8c/ –

@KiranKumarDash和該解決方案https://jsfiddle.net/arunpjohny/dctnbo8c/1/ –

只是刪除與$ HREF否則你使用的 '＃'代碼工作正常花花公子

$('ul.nav').find('a').click(function(){ 
    var $href = $(this).attr('href'); 
    var $anchor = $($href).offset(); 
    $('body').animate({ 
      scrollTop: $anchor.top 
    },'slow'); 
    return false; 
});

它拋出語法錯誤，無法識別的表達：## howToUse

來源

2015-07-21 08:06:35

謝謝。但仍然不順暢。它只是跳轉到div。我期待它能順利滾動。 –

@Kiran Kumar Dash您可以將'slow'更改爲特定的英里數，如1000或根據您的需要參考** http：//api.jquery.com/animate/ **瞭解如何應用動畫速度 –

這是網站我在嘗試它：irankmedia.com/uskincare –

試試這個：

$('ul.nav').find('a').click(function() { 
    var $href = $(this).attr('href'); 
    //var $anchor = $('#'+$href).offset(); 
    $('html, body').animate({ 
     scrollTop: $($href).offset().top 
    }, 2000); 
    return false; 
});

演示here

來源

2015-07-21 08:07:55 Ash

仍然無法解決我的問題。它只是跳轉到div。我期待它能順利滾動。 –

你試過演示了嗎？ – Ash

我見過你的代碼。所以，我知道代碼是正確的。但在我的情況下，它只是跳轉到div。 –

jQuery使用動畫順利滾動到div

回答

相關問題