Question

CSS或JavaScript实现返回顶部按钮定位。

要求：1. 返回顶部按钮 始终贴合在网页主体的右下角。2.当用户通过滑动滚轮或使用“Ctrl+滚轮”改变网页大小，其相对位置不变。

具体看图
强调一下，仅仅是定位效果怎么写，而不是返回顶部js。

具体效果请参见百度贴吧网页右侧返回按钮

P.S JS中有没有什么用来检测网页被放大的函数。

----------------------------------------------------------------------------------

自己搞定了。
topdiv的right=网页主体.offsetRight-返回顶部div的宽度；
给body添加一个onresize事件来检查网页是否被放大,并改变right值；

Answer 1

例子代码及效果如下：

<div style="margin:0px; padding:5px; width:15px; height:90px; position:fixed; bottom:100px; right:150px; background-color:#00cc33; font-family:'微软雅黑'">返回顶部</div>

核心有三个：

1、position:fixed >> 表示位置不随滚动条滚动

2、bottom:100px >> 表示该div距浏览器下边缘100像素

3、right:150px >> 表示该div距离浏览器右边缘150像素

position:fixed; bottom:100px; right:150px;

那部分的效果如下图，不会根据浏览器滚动条的拖动而改变位置：

追问

亲，我要的是返回按钮贴合在网页主题的边上，显然这个right值不是固定的，你把它写死了，不同的分辨率就会有不同的效果。而且当用户放大网页后这个按钮还会跑到网页里去。

追答

获取浏览器宽度

 var browerWidth = document.body.clientWidth

right = (browerWidth - 网页主体宽度)/2 - 返回顶部div宽度

追问

还可以直接用 left=网页主体.offsetLeft-返回顶部div，问题是网页放大后效果又不一样了。

追答

要想不随滚动条滚动就只能用fixed
相对于浏览器边界或者网页主体只能选一种，两个都要不太可能
还有种办法是不用fixed，用js来实时定位，不过那样的缺点是你拖动滚动条的时候，那个返回顶部的div会抖，就像那些广告条一样
倒是可以拖动滚动条后以一个平滑的速度飞到底端，还是蛮好看的

Answer 2

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/func/back-2-top/cwp-back-2-top.js"></script>
<div id="shangxia">
       <div id="shang" title="↑ 返回顶部"></div>
       <?php if ( is_singular() ){ ?>
       <div id="comt" title="查看评论"></div>
       <?php } ?>
       <div id="xia" title="↓ 移至底部"></div>
</div>

CSS

#shangxia{position:fixed;top:45%;right:66.5%;display:block;margin-right:-540px;z-index:999;}
#shang,#comt,#xia{background:url(img/1.png) no-repeat;position:relative;cursor:pointer;
height:25px;width:29px;margin:10px 0 0;}
#comt{background-position:left -30px;height:32px;}
#xia{background-position:left -68px;}
#comt:hover{background-position:right -30px;}
#shang:hover{background-position:right 0;}
#xia:hover{background-position:right -68px ;}

JS:

jQuery(document).ready(function($) {
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
    $("#shang").mouseover(function() {
        up()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        $body.animate({
            scrollTop: 0
        },
        400)
    });
    $("#xia").mouseover(function() {
        dn()
    }).mouseout(function() {
        clearTimeout(fq)
    }).click(function() {
        $body.animate({
            scrollTop: $(document).height()
        },
        400)
    });
    $("#comt").click(function() {
        $body.animate({
            scrollTop: $("#comments").offset().top
        },
        400)
    });
});
function up() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() - 1);
    fq = setTimeout("up()", 50)
};
function dn() {
    $wd = $(window);
    $wd.scrollTop($wd.scrollTop() + 1);
    fq = setTimeout("dn()", 50)
};

Answer 3

直接上图吧：

追问

或许是我描述的有点问题吧。如果divTop相对于mainDiv绝对定位，按照你的说法，的确能达到那个效果。但是如果mainDiv太高了，那么在一屏甚至二屏都看不到那个返回按钮了。手机回复，未测试。

追答

哎哟我去，疏忽了这个问题。

那只能相对才窗体用fixed了哟，然后距离用百分数写，这样就不会有你说的缩小页面就跑走了，放大页面一定范围不会跑页面里，但是超过窗体大小时就会跑页面里的，这个无法避免。

Answer 4

我有现成的代码和链接：

http://blog.snowinmay.net/jquery/Totop/Totop.html

你查看源代码即可，有问题可以继续追问，有用就采纳！

Answer 5

直接给a标签写个空连接重新刷新页面应该也是同样的效果，只不过没其他方法炫酷