欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

使用js实现快速回到网页顶部功能

创建时间:2013年07月09日 09:52  阅读次数:(5552)
分享到:
我们在很多网站上面都会看到有快速回到网页顶部的按钮,如下图所示:
回到顶部

这样简单的小功能很多时候就会给用户体验加分不少,下面我们使用jQuery来实现这样的功能。
一,先在页面中加入以下CSS文件:
<style >
.backToTop
{
    display: none;
    width: 18px;
    line-height: 1.2;
    padding: 5px 0;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}
</style >

大家可以根据需要适当的修改上面的css,使按钮呈现不同的风格。

二,在页面加入jQuery引用链接。
我们引入Google提供的jQuery,Google的东西一般都比较靠的住,加载时间少。代码如下:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script >

三,在页面中加入以下jQuery代码:
<script >
(function() {
    var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop" ></div >').appendTo($("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
    $("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
    var st = $(document).scrollTop(), winh = $(window).height();
    (st  > 0) ? $backToTopEle.show() : $backToTopEle.hide();
    //IE6下的定位
    if (!window.XMLHttpRequest) {
        $backToTopEle.css("top", st + winh - 166);
    }
};
    $(window).bind("scroll", $backToTopFun);
    $(function() { $backToTopFun(); });
})();
</script >

保存。这样当我们的页面往下拉动一小段距离后就会出现“回到项部”的按钮了。
建议将jQuery引用链接与jQuery代码加到Body标签后,以加快页面的呈现速度。

最后,如果"返回顶部"这几个字以乱码呈现,请为页面指定编码,代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
r
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 5+15=? 的结果(结果是:20)
结  果: