2012-09-26 32 views
3

我想在設置爲溢出的div底部添加一個滾動到頂部按鈕:auto。它將用於使用ajax將內容(各種長度)調用到div中的網站部分。在一個溢出內淡入'滾動到頂部'按鈕:自動div

我想要的功能: 當用戶在div內滾動時,按鈕會淡入視圖(很像本教程:http://www.mattvarone.com/web-design/uitotop-jquery-plugin/)。我找到了很好的教程,可以提供這種淡入功能,但是隻與整頁的長度有關,而不是個別的滾動div。這是我遇到麻煩的地方。

我能夠在滾動div內創建一個固定的按鈕。我對編碼非常陌生,無法弄清楚如何創建在用戶在div內滾動時觸發的淡入效果。看到我在這裏的示例嘗試:http://jsfiddle.net/in_excess/eEHbW/5/

如果有人可以提供一些幫助,將不勝感激。即使只是鏈接到一個網站/教程,做我所描述的。我一直在Google上搜索幾天,找不到我需要的東西。謝謝!

回答

1

你需要計算基於div的滾動區域的不透明度:

$('#content').scroll(function() { 
    var total = $(this)[0].scrollHeight - $(this).height(); 
    var opacity = $(this).scrollTop()/total; 
    $('#backtotop').css('opacity', opacity); 
}); 

正如你從上進一步滾動,滾動後退按鈕變得更加不透明。

這是更新的小提琴:http://jsfiddle.net/adrianonantua/eEHbW/9/

+0

謝謝,這工作完美,很容易理解! – user1701410

0

阿羅哈。您可以使用JavaScript來抓住像一個div元素的尺寸/高度:

var divSize = document.getElementById('myDiv').style.height; 

然後你就可以使用這些信息來調整您正在使用,以創建按鈕的div的不透明度/過濾器:

var opacity = divSize/10; //or whatever method you want to use to determine opacity 
var button = document.getElementById('scrollToTopButton'); 
button.style.opacity = opacity; 
button.style.filter = "alpha(opacity="+ opacity +")"; 
+0

感謝您的提示!我無法完成它的工作,但我認爲這更多的是我缺乏經驗,而不是您的代碼。 – user1701410