向上/向下滾動到固定按鈕的部分

我想要構建一個腳本來向上/向下滾動頁面的標籤。我的源代碼如下所示：向上/向下滾動到固定按鈕的部分

HTML：

<div class="move"> 
    <div class="previous">UP</div> 
    <div class="next">DOWN</div> 
</div> 
<section>First</section> 
<section>Second</section> 
<section>Third</section> 
<section>Fourth</section>

CSS：

section{ 
    height: 400px; 
    border: 1px solid black; 
} 

.move{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
}

我也有兩個按鈕，其固定在頁面的底部。

現在我想創建一個腳本來向上/向下滾動到部分。如果有人在情況下刷新網頁怎麼辦 - 例如第2部分將位於頁面的頂部？如何確定哪一部分當前離頁面最近？

Here is fiddle.

來源

2013-10-18 repincln

以下示例使用頁面的當前滾動位置來確定需要滾動到哪個節元素而不是顯式變量，如果用戶要手動滾動到不同節，然後按則變爲不同步導航按鈕。

$(function() { 
    var $window = $(window); 
    $('.next').on('click', function(){ 
     $('section').each(function() { 
      var pos = $(this).offset().top; 
      if ($window.scrollTop() < pos) { 
       $('html, body').animate({ 
        scrollTop: pos 
       }, 1000); 
       return false; 
      } 
     }); 
    }); 

    $('.previous').click(function(){ 
     $($('section').get().reverse()).each(function() { 
      var pos = $(this).offset().top; 
      if ($window.scrollTop() > pos) { 
       $('html, body').animate({ 
        scrollTop: pos 
       }, 1000); 
       return false; 
      } 
     }); 
    }); 
});

工作例如：JSFiddle

來源

2013-10-18 08:56:31

謝謝。這正是我想要的。 – repincln

您可以添加ID到每個部分，然後滾動到他們是這樣的：

var elem = 0; 
$('.next').click(function(){ 
    ++elem; 
    if(elem < 0) elem = 1; 
    $('html, body').animate({ 
     scrollTop: $("section[id=sec"+elem+"]").offset().top 
    }, 2000); 
}); 

$('.previous').click(function(){ 
    --elem; 
    if(elem < 0) elem = 1; 
    $('html, body').animate({ 
     scrollTop: $("section[id=sec"+elem+"]").offset().top 
    }, 2000); 
});

JSFiddle

你也應該限制ELEM變量，以便你的滾輪是結束它不應該計數。

來源

2013-10-18 08:33:53 AxelPAL

答案也不錯，但我需要沒有ID的解決方案。 – repincln

這裏是我的版本，

有答案是正確的，但如果他們刷新頁面，它不會知道哪一個是當前活動。

雖然我沒有完全測試，但我不知道是否需要在加載後再次滾動，因爲jsfiddle無法進行手動刷新。

JSFIDDLE

if(window.location.hash !=""){ 

    var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+""; 
    var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+""; 

$('html, body').animate({ 
     scrollTop: $(""+window.location.hash+"").offset().top 
    }, 2000,function(){ 
     window.location.href=scrollId; 
     $(".previous").attr("data-target",scrollIdPrev); 
     $(".next").attr("data-target",scrollIdNext); 
    }); 

} 

$('.next').click(function(){ 

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+""; 


    $('html, body').animate({ 
     scrollTop: $(""+scrollId+"").offset().top 
    }, 2000,function(){ 
     window.location.href=scrollId; 
     $(".previous").attr("data-target",scrollId); 
     $(".next").attr("data-target",window.location.hash); 
    }); 

}); 

$('.previous').click(function(){ 

    var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+""; 

    $('html, body').animate({ 
     scrollTop: $(""+scrollId+"").offset().top 
    }, 2000,function(){ 
     window.location.href=scrollId; 
     $(".next").attr("data-target",scrollId); 
     $(".previous").attr("data-target",window.location.hash); 
    }); 

});

編輯：哦，還有錯誤這裏，如果你按了，你的第一，將有一個錯誤，只是把一個檢查，如果上一個或下一個存在。通過使用.length（）;

來源

2013-10-18 09:25:16

向上/向下滾動到固定按鈕的部分

回答

相關問題