Question

我正在尝试创建“返回顶部”图片，它需要贴在页面的右下角。

我已经用图像创建了div，但我不知道将它永久保留在页面底部的最佳方法是什么。最好使用绝对定位吗？

另外，我希望div仅在用户滚动到某个点并且淡入（或类似的东西？）时出现。

我已经在线查看，但找不到任何符合我想要的东西。我试过简单地让div坚持到底部但是我一直在使用的教程展示了如何创建页脚，而不仅仅是一个小图形，所以它不能正常工作。

这方面的最佳做法是什么？任何帮助表示赞赏！

Answer 1

这个怎么样：

http://jsfiddle.net/uRN64/1

HTML

<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>

<div style='height:1200px; background-color:orange'>Try Scrolling me</div>

JS

$(function(){
    $(window).scroll(function() {              
      $('#log').toggle($(document).scrollTop() > 100);
    });
})

褪色：

更改：$('#log').toggle($(document).scrollTop() > 100);至

$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();

Answer 2

假设你有一个div

<div class="bottom">Your Img</div>

将fixed position应用于div，因为我们希望div看起来是固定的。

通过这样做，我们可以自由地将div移动到我们想要的区域。

然后，通过应用CSS属性right:0;和bottom:0;，我们可以将div移到页面的最右侧和最底部位置。

<强> HTML：

<div class="bottom"></div>

<强> CSS：

.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0; 
bottom:0;    
}

这是 Live Example

创建滚动后显示的div，永久保留在页面底部

2 个答案: