比较简单的实现”返回顶部”

设置CSS

更新:margin-left的值过大,导致内容挡住了按钮.已更新.
[具体样式可以参考我的.]

下面是CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#returnTop { /* 默认样式 */
    width:51px;
    height:51px;
    margin-top:220px;
    margin-left:20px;/*原来:margin-left:200px;更新:此值尽量小一些,否则在一些小的屏幕上无法完整显示按钮*/
    position:absolute;
    position:fixed
}
.returnMout { /*移除后的样式*/
    background:url(images/returntop.gif);
    position:0px 0px;
    position:absolute;
    position:fixed
}
.returnMover { /*移到元素上的样式*/
    width:51px;
    height:51px;
    background:url(images/returntop.gif);
    position:absolute;
    position:fixed;
    background-position:-51px -51px
}

按钮图片

按钮图片
image-1912

JS部分

使用jQuery(1.10.*)版本,不过可以把下面的JS代码直接放到你的网站本身的JS里面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(window).scroll(function() {

    var bt = $('#returnTop');

    bt.removeClass("returnMover");

    bt.addClass("returnMout");

    var st = $(window).scrollTop();

    if (st > 50) {

        bt.show();

        //
        bt.mouseover(function(e) {

            bt.removeClass("returnMout");

            bt.addClass("returnMover");

        });

        bt.mouseout(function(e) {

            bt.removeClass("returnMover");

            bt.addClass("returnMout");

        });

        bt.click(

        function() {

            window.scroll(0, 0);

        }

        );

    } else {

        bt.hide();

    }

});

返回顶部 效果图
image-1913

HTML元素

1
<div id="returnTop">&nbsp;</div>

放在页面顶部,我放在底部没效果,不知道为什么.

发表评论

您的电子邮箱地址不会被公开。

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据