Question

我正在尝试在div的底部添加一个Scroll to Top按钮，该div设置为overflow：auto。它将用于站点的一部分，该站点使用ajax将内容（不同长度）调用到div中。

我想要的功能：当用户在div中滚动时，按钮会淡入视图（很像本教程：http://www.mattvarone.com/web-design/uitotop-jquery-plugin/）。我找到了很好的教程，提供这个淡入功能，但只与整页的长度有关，而不是单独的滚动div。这是我遇到麻烦的地方。

我能够在滚动div中创建一个固定按钮。我对编码很新，无法弄清楚如何创建用户在div中滚动时触发的淡入效果。请在此处查看我的示例尝试：http://jsfiddle.net/in_excess/eEHbW/5/

如果有人能提供一些帮助，我们将不胜感激。甚至只是链接到我正在描述的网站/教程。我一直在谷歌搜索这几天，找不到我需要的东西。谢谢！

Answer 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/

Answer 2

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

在溢出内淡入“滚动到顶部”按钮：自动div

2 个答案: