jQuery+css打造的返回底部、返回顶部效果

JavaScript

以前收藏了很多返回顶部的文章

以下是返回底部的jQuery代码

使用方法：

js部分：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
 $(function () {
 $(".top").click(//定义返回顶部点击向上滚动的动画
 function () {
 $('html,body').animate({ scrollTop: 0 }, 700);
 });
 $(".bottom").click(//定义返回顶部点击向上滚动的动画
 function () {
 $('html,body').animate({ scrollTop: document.body.clientHeight }, 700);
 });
 })
</script>

css示例：

<style type="text/css">
body {
 margin: 0;
 padding: 0;
 font-size: 9pt
}

#main {
 margin: 0 auto;
 width: 910px;
 height: 125pc
}

.go {
 position: fixed;
 right: 9pt;
 bottom: 25%;
 width: 47px;
 height: 106px
}

.go a {
 float: left;
 overflow: hidden;
 margin: 5px;
 width: 37px;
 border: 0;
 cursor: pointer
}

.go .top {
 height: 22px;
 background-position: 0 0
}

.go .feedback {
 height: 2pc;
 background-position: 0 -22px
}

.go .bottom {
 height: 22px;
 background-position: 0 -55px
}

.go .top:hover {
 background-position: -38px 0
}

.go .feedback:hover {
 background-position: -38px -22px
}

.go .bottom:hover {
 background-position: -38px -55px
}
</style>

html部分：

<div id="main">
<div class="go">
<a title="返回顶部" class="top">顶部</a>
<a title="如果您有意见，请反馈给我们！" class="feedback" href="#" target="_blank">意见</a>
<a title="返回底部" class="bottom" >底部</a>
</div>

[runcode]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


jQuery+css打造的返回底部、返回顶部特效丨网页特效丨DAZHES.COM




[/runcode]