尋找最近的鏈接

我有一個頁面滾動網站，7頁，每頁高度約1000px。我的菜單結構是這樣的，尋找最近的鏈接

<a href="#home" class="home">Home</a> 
<a href="#about" class="about">About</a> 
<a href="#team" class="team">Team</a> 
<a href="#contact" class="contact">Contact</a>

通過單擊一個鏈接，它將滾動到分配給該部分的相應ID。

我也有一個小小的位置固定按鈕與2個箭頭指向上下。

<div class="button"> 
    <i class="go-up"></i> //up arrow 
    <i class="go-down"></i> //down arrow 
</div>

我想通過單擊箭頭導航到最近的部分。舉個例子，假設我在#team之內，所以當我點擊.go-up時，它應該導航到#about，並且.go-down應該去#contact。再次移動到#contact後，這應該識別新的最接近的目標。

請幫我在jQuery中做到這一點。

來源

2013-02-25 Body

幫助你什麼？你有什麼嘗試？ – gdoron 2013-02-25 19:06:23

在頁面加載時，計算每個元素的垂直位置，然後當您點擊向上或向下時，通過計算出哪一個距離當前位置最近（使用預先計算的位置）並滾動到它。 – 2013-02-25 19:19:14

我會用一個類標誌

例如，使用類current上的鏈接

$('.button i').click(function() { 
    var $anchor = $('.current'); 
    var direction = $(this).prop('class'); 

    if (direction == 'go-up' && $anchor.prev().length > 0) { 
     $('a').removeClass("current"); 
     $anchor.prev().addClass("current"); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.prev().attr('href')).offset().top 
     }, 1500); 
    } else if (direction == 'go-down' && $anchor.next().length > 0) { 
     $('a').removeClass("current"); 
     $anchor.next().addClass("current"); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.next().attr('href')).offset().top 
     }, 1500); 
    } 

});

然後。你可以使用$('.current')

並使用.prev()和.next()

http://jsfiddle.net/PhckT/1

來源

2013-02-25 19:56:56

愛你佩德羅，這個作品就像一個魅力。非常感謝你。 – Body 2013-02-28 21:40:34

既然你提到幫助你找到使用jQuery的解決方案，這裏有一個解決方案：

上去可能是這樣的：

$('.button > .go-up').on("click",function(){ 
    var container = $("#mainPageContainer"); 
    var prevElement = container.prevAll('.aClassToPutOnPageContent:first'); 
    container.scrollTo(prevElement); 
    });

和往下走可能是：

$('.button > .go-down').on("click",function(){ 
    var container = $("#mainPageContainer"); 
    var nextElement = container.nextAll('.aClassToPutOnPageContent:first'); 
    container.scrollTo(nextElement); 
    });.

另請參閱This link獲取一個很好的內容滾動插件！

來源：How to use jquery next() to select next div by class

但也許下一次嘗試搜索多一點點！我花了大約20秒才找到我的來源。（;

祝你好運，玩得開心，

馬克

來源

2013-02-25 19:20:04 Marcky

假設你有加價像下面這樣：

<a href="#home" class="home">Home</a> 

<a href="#about" class="about">About</a> 

<a href="#team" class="team">Team</a> 
<a href="#contact" class="contact">Contact</a> 

    <div> 
     <div id="home"> 
      <p>Some content in 'home.'</p> 
      <div class="button"> 
       <i class="go-up">&uarr;</i> 
       <i class="go-down">&darr;</i></div> 
     </div> 
     <!-- other sections omitted for brevity --> 
    </div>

我建議：

$('.button i').click(
    function(){ 
     var mvTo = $(this).closest('div[id]')[$(this).hasClass('go-up') ? 'prev' : 'next']().offset(), 
      x = mvTo.left, 
      y = mvTo.top; 
     window.scrollTo(x,y); 
    });

JS Fiddle demo。

參考文獻：

來源

2013-02-25 20:00:14

尋找最近的鏈接

回答

相關問題