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

【问题标题】：Fade-in 'scroll to top' button inside an overflow:auto div溢出内的淡入“滚动到顶部”按钮：自动 div
【发布时间】：2012-09-26 20:17:46
【问题描述】：

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

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

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

如果有人可以提供一些帮助，将不胜感激。甚至只是一个指向我所描述的网站/教程的链接。我已经在谷歌上搜索了几天，找不到我需要的东西。谢谢！

【问题讨论】：

标签： jquery scroll overflow fadein scrolltop

【解决方案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/

【讨论】：

谢谢，效果很好，而且很容易理解！

【解决方案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 +")";

【讨论】：

感谢您的提示！我不能让它工作，但我认为这更多是我缺乏经验而不是你的代码。