如何對多個元素使用相同的jQuery滾動功能

我有一個滾動功能，當用戶滾動到160像素時，顯示'滾動到頂部'元素，點擊此元素頁面滾動到頁面頂部。如何對多個元素使用相同的jQuery滾動功能

我想使用該功能創建更多滾動按鈕，這些按鈕將在文檔的不同階段顯示，並滾動到不同的區域。

例如，當用戶滾動到400像素時，單擊「下一個」時出現的元素向下滾動300px，他們從頂部到900px顯示一個新的滾動元素，當點擊滾動到1300px時，等等。

這裏是jQuery代碼我有：

$(document).ready(function(){ 

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 160) { 
     $('.scrollToTop').fadeIn(); 
    } else { 
     $('.scrollToTop').fadeOut(); 
    } 

}); 

$('.scrollToTop').click(function(){ 
    $('html, body').animate({scrollTop : 0},800); 
    return false; 
}); 
});

HTML：

<div class="scrollToTop-container"> 
<a href="#" class="scrollToTop"><img src="img/icon_arrow_up.png" width="24" height="24" />  <br/>Scroll to top</a> 
</div>

我希望那不是太混亂。

感謝

來源

2014-10-31 al3

也許你可以使用這樣的函數我做了重用你的代碼的某些部分：

function scroll(id,show,limit,timeout){ 
    $(window).scroll(function(){ 
    if ($(this).scrollTop() > show) { 
     $(id).fadeIn(); 
    } else { 
     $(id).fadeOut(); 
    } 
}); 
$(id).click(function(){ 
    $('html, body').animate({scrollTop : limit},timeout); 
    return false; 
}); 
}

，然後用它是這樣的：

scroll(".scrollToTop",160,0,800);

，其中第一個參數是你想要受到影響的class或id，其次是元素在特定高度（從頂部）的位置，第三是限制（你想向上滾動的位置），最後一個是的持續時間功能。

編輯：您可能還喜歡停在特定的像素，不僅滾動到頂部，所以我改變設置scrollTop的位置在你的慾望的功能。

來源

2014-10-31 21:31:40 cgrs

感謝您的回答！這看起來正是我所需要的，只是我不確定如何使用'scroll（「。scrollToTop」，160,800「）;'我知道每次都必須更改變量，但是我在哪裏放置它們時間爲不同的元素工作 – al3 2014-10-31 21:53:36

@ user3124052我改變了答案，所以你可以看到它不僅能夠停止在頂部，也在你想要的位置 – cgrs 2014-10-31 21:59:30

我試過了，它可以工作，但沒有動畫，只有它的這一部分作品'scroll（「。scrollToTop」，160,0' – al3 2014-10-31 22:11:50

如何對多個元素使用相同的jQuery滾動功能

回答

相關問題