jQuery Scroller問題

我目前正在嘗試在我的投資組合網站上實施向上和向下按鈕（浮動菜單），以向頁面滾動一定量。例如，我會點擊向下按鈕，它會滾動100px，反之亦然。jQuery Scroller問題

我目前使用此代碼來滾動到一個特定的錨點，當點擊一個按鈕，但我只是想修改它，以點擊時向上或向下移動一定數量的像素。

$(document).ready(function(){ 
    $('a[href*=#jump]').click(function() { 
     if (location.pathname.replace(/^\//,") == this.pathname.replace(/^\//,") && location.hostname == this.hostname) { 
      var $target = $(this.hash); 
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
      if ($target.length) { 
       var targetOffset = $target.offset().top; 
       $('html,body').animate({scrollTop: targetOffset}, 1000); 
       return false; 
      } 
     } 
    }); 
});

HTML中的當前鏈接爲：<a class="jump" href="#jump">Back To Top</a>

其滾動到錨：<a id="jump" href="#"></a>

我相信有人會知道我的意思馬上會問我，如果你需要更多的細節和我可以提供我想要實現的一個例子。幫助將不勝感激。

來源

2011-02-01 Ryan

我意識到你在評論中給出的例子有滾動動畫，所以你可以看到它發生。所以我更新了我的答案，其中包含的代碼顯示瞭如何爲向下滾動或向上滾動 – Anton 2011-02-01 22:18:32

Cheers。大ups安東：D – Ryan 2011-02-02 00:34:48

您可以使用jQuery的scrollTop的（）來調整滾動垂直滾動條。

例如，如果您向下滾動的按鈕的ID爲scrollDownButton，並且您想向下滾動頁面100px，則以下代碼將執行此操作。

$('#scrollDownButton').click(function() { 
    var currPosition = $('body').scrollTop(); 
    $('body').scrollTop(currPosition + 10); 
});

scrollTop()會給你垂直滾動條的當前位置和scrollTop(value)將其設置到指定位置。

如果要向上滾動頁面，則從當前值中減去而不是添加。

注意：您想要選擇具有滾動條的元素。在上面的例子中，它是<body>，但<html>也是一個常見元素。另外scrollTop（）在JQuery 1.2.6中實現，確保你的版本足夠新。

更新：如何動畫滾動。

如果你想動畫滾動，並看到它發生，而不僅僅是跳躍向上或向下，你可以使用下面的代碼：

$('#scrollDownButton').click(function() { 
    var currPosition = $('body').scrollTop(); 
    $('body').animate({scrollTop: currPosition+100}, 'slow'); 
})

更新瑞安

下面是代碼爲您的特定頁面。

$('document').ready(function() { 
    $('#scrollDownButton').click(function() { 
     var currPosition = $('html').scrollTop(); 
     $('html').animate({scrollTop: currPosition+100}, 'slow'); 
    }); 
});

來源

2011-02-01 20:32:58 Anton

一種方法可以是使用jQuery的ScrollTo並簡單地指定偏移量。

jQuery ScrollTo

例如，你可以有它一直滾動到相同的元素，而是由100像素的增量，ECT改變偏移值。

但是我想像還有比這一點有一個更好的方法...

來源

2011-02-01 20:22:12 jCuga

這是一個網站的例子，即時通訊試圖實現http://www.gregponchak.com/ – Ryan 2011-02-01 20:24:16

jQuery Scroller問題

回答

相關問題