在一個溢出內淡入'滾動到頂部'按鈕：自動div

我想在設置爲溢出的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上搜索幾天，找不到我需要的東西。謝謝！

來源

2012-09-26 user1701410

你需要計算基於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/

來源

2012-09-26 20:36:45

謝謝，這工作完美，很容易理解！ – user1701410

阿羅哈。您可以使用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 +")";

來源

2012-09-26 20:22:48 L0j1k

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

在一個溢出內淡入'滾動到頂部'按鈕：自動div

回答

相關問題