jQuery平滑水平滾動

我創建了一個長的水平頁面，並使用錨點導航到頁面內的部分。我添加了一個jQuery平滑滾動功能，但它沒有影響？jQuery平滑水平滾動

這裏的導航：

<ul class="nav"> 
<li><a href="#starters">Starters</a></li> 
<li><a href="#main">Main Dishes</a></li> 
<li><a href="#special">Special Dishes</a></li> 
<li><a href="#side">Side Dishes</a></li> 
</ul>

在我添加相應的錨內容：

<a name="starters"></a>

而這裏的jQuery函數：

$(function() { 
$('ul.nav a').bind('click',function(event){ 
    var $anchor = $(this); 

    $('html, body').stop().animate({ 
     scrollLeft: $($anchor.attr('href')).offset().left 
    }, 1500, "easeInOutExpo"); 
    event.preventDefault(); 
}); 
});

錨的做工精細，點擊導航會把你帶到想要的部分，但是它可以在ju mps而不是滾動。

任何想法爲什麼？

來源

2013-10-14 SlightlyClever

它看起來像你的代碼是，除了這是正確的：

<a name="starters"></a>

變化name到id。據我所知，錨定標記沒有HTML name屬性。另外，你不需要爲你的部分「相應的錨點」。假設您的部分包裝有<section>或<div>，只需給每個包裝區塊元素分配一個id，與每個錨鏈接中的href相同。所以：

<section id="starters">content</section>

來源

2013-11-02 23:11:49 th3lonius

這對於HTML5是正確的，但是的確有其他名稱：http://www.w3schools.com/tags/att_a_name.asp – Waclock

也許你忘了使用jQuery的放寬動畫 http://matthewlein.com/experiments/easing.html

來源

2014-01-07 10:58:50 therealpablors

請注意，[僅限鏈接回答]（http：// meta .stackoverflow.com/tags/link-only-answers/info），所以答案應該是搜索解決方案的終點（而另一個引用的中途停留時間往往會隨着時間的推移而變得過時）。請考慮在此添加獨立的摘要，並將鏈接保留爲參考。 – kleopatra

感謝您的評論Kleopatra。我有和Rumman相同的問題，解決方案是使用jQuery緩動庫來啓用動畫 – therealpablors

這是簡單的添加類的div這就需要例如下面滾動：

<ul class="nav"> 
<li class="a"><a href="#starters">Starters</a></li> 
<li class="b"><a href="#main">Main Dishes</a></li> 
<li class="c"><a href="#special">Special Dishes</a></li> 
<li class="d"><a href="#side">Side Dishes</a></li> 
</ul>

現在，你的js會是這樣的：

$(function() { 
$('#clickable element').bind('click',function(event){ 
    $('#targetelement or div').stop().animate({ 
     scrollLeft: $('.a').offset().left 
    }, 500); 
    event.preventDefault(); 
}); 
});

同樣，你可以爲b，c，d類建立js。

來源

2017-03-31 04:52:57 Maulik

jQuery平滑水平滾動

回答

相關問題