3

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

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

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

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

4

2 回答 2

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/

于 2012-09-26T20:36:45.933 回答
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 +")";
于 2012-09-26T20:22:48.720 回答