在一个溢出内淡入'滚动到顶部'按钮：自动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

回答

相关问题