jQuery 实现 Scroll to Top 滚动到页面顶部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
*body {
    background-attachment: fixed;
    background-image: url(about:blank); /* 必须地,防抖动 */
}
*body #toTop {
    position: absolute;
    top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */
}
#toTop {
    border: 1px solid;
    bottom: 10px;
    position: fixed;
    right: 10px;
}
</style>
</head>

<script src='http://code.jquery.com/jquery.js'></script>
<script>
$(document).ready(function() {
    var toTop = $("#toTop");
    if ($(window).scrollTop() < 500) {
        toTop.hide();
    }
    $(window).scroll(function() {
        if ($(window).scrollTop() < 500) {
            toTop.fadeOut("fast");
        } else {
            toTop.fadeIn("fast");
        }
    });
    toTop.click(function() {
        $("html,body").animate({
            scrollTop: 0
        }, 500);
        return false
    });
});
</script>

<body>

<div style="height:3000px;"></div>
<a href="#" id="toTop">Scroll to Top ^</a>

</body>
</html>

知识共享许可协议
《jQuery 实现 Scroll to Top 滚动到页面顶部》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     160.99ms