实现页面某位置点击到底部和回顶部

实现效果和hao123 首页那样





开始页面加载默认 “到底部”，当滚动条拉到一定位置后 “到底部” 自动改变为 “回顶部”；点击 “到底部” 页面会跳转到最底部，点击 “回顶部” 页面又会自动跳转到最顶部.

实现代码如下：

先引用 jquery 脚本。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

写样式，div定位在屏幕末位置上（不会因为滚动条滚动而改变位置）

<style type="text/css">
#to
{
color: Blue;
position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
}
</style>

绑定滚动条事件，当滚动条下拉到一定位置后，改变div的html值从默认加载时候的 “到底部” 改为 “回顶部”。

<script type="text/javascript">
$(function () {
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop1 = parseInt(sTop);
//设置滚动条拉到什么位置改变div的html值
if (sTop1 >= 530) {
$("#to").html("回顶部");
}
else {
$("#to").html("到底部");
}
});

//为div添加点击事件
$('#to').click(function () {
//判断div的html值，根据值来实现是到底部还是回顶部
if ($("#to").html() == "回顶部") {
//页面跳转到顶部
$('html,body').animate({ scrollTop: '0px' }, 1000); return false;
} else {
//页面跳转到底部
$('html,body').animate({ scrollTop: $('#footer').offset().top }, 1000); return false;
}
});
})
</script>

下面body里面：

<div id="to">
到底部
</div>

底部锁定用来跳转的a标签：

<a name="footer" id="footer"></a><font color="blue">这是底部</font>