1.引入jQuery类库及插件库,效果及插件请看附件
<script type="text/javascript" src="js/jQuery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.scrolltotop.js"></script>
2.样式控制
<style type="text/css">
/* 返回top样式*/
.totop {
width: 40px;
height: 35px;
line-height: 35px;
font-size: 12px;
overflow: hidden;
}
.totop a {
display: block;
width: 40px;
height: 35px;
background: url(images/totop.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
}
.totop a:hover {
background-position: 0 -35px;
}
</style>
3.body内容
<div style="margin-top:200px;text-align:center;height:1000px;background-color:#cccccc;">
这是body内容,滚动滚动条,请看右下角。
</div>
4.JS控制出现返回顶部图片
<script type="text/javascript">
$(function($){
// 返回顶部
$.scrolltotop({
className: 'totop',
// controlHTML : '<a href="javascript:;">回到顶部↑</a>',
// 此处可以换成下面的图片格式
// controlHTML : '<img title="返回顶部" src="images/totop.gif"/>'
offsetx : 25,// 回到顶部 right 偏移位置
offsety : 25,// 回到顶部 bottom 偏移位置
});
});
</script>
分享到:
相关推荐
jQuery类级别插件--返回顶部,底部,去到任何部位
jQuery插件页面滚动返回顶部按钮 jQuery插件页面滚动返回顶部按钮
这是一个直接可用的返回顶部的jquery插件
这是一款超级简洁实用的jQuery返回顶部插件。该返回顶部插件在页面滚动到一定高度时自动出现,用户点击它后会以平滑的方式滚动到页面顶部。
jquery.returnTop返回顶部Jquery插件
快速返回顶部jquery插件</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/...
古典云纹返回顶部插件是基于emlog博客网站进行开发的中国风返回顶部插件。说实话网上的返回顶部太多了,但中国风的还是很少,几乎很少看到,于是本人着手制作了几款。这是一款比较美观的中国风返回顶部。该古典云纹...
很好用的常用jquery插件,有很详细的介绍
jquery实现右侧显示分享类按钮及返回顶部按钮插件
gototop是一款轻量级、简单易用的jquery返回顶部插件。该jquery返回顶部插件在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。
Jquery返回顶部插件使用简单,步骤如下: 1、引用插件js和css文件 2、设置默认参数(showHeight :设置滚动高度时显示、speed :返回顶部的速度以毫秒为单位)
这是一款效果非常炫酷的中国风古典云纹返回顶部jQuery插件。该返回顶部插件使用中国古典云纹元素,通过jquery和GSAP,以及CSS3来制作返回顶部特效。
material-scrolltop是一款轻量级Material Design风格返回顶部jQuery插件。该返回顶部按钮有点击波特效,动画平滑过渡效果,并且通过参数可以配置各种滚动动画的easing效果。
一个又 jquery写成的返回顶部小插件,很美观
代码简介:返回顶部插件jquery.gototop是一款当在用户向下滚动页面一段距离之后,会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后,页面以平滑的方式滚动回顶部。
是一个简单的jQuery插件,让你的网页用户直接回到顶部。 使用方法非常简单 引用jquery库和jquery.goup.min.js到你的页面 在调用下插件就OK了 $(document).ready(function () { $.goup({ trigger: 100, ...
jQuery.toTop是一款轻量级可自由定制的平滑滚动的jQuery返回顶部插件。该返回顶部插件大小只有1kb,返回顶部按钮的样式可以通过CSS来完全自定义。返回顶部时的动画效果平滑顺畅,而且使用非常简单。
素材简介:jQuery回到顶部插件GoUp是一款简单的jQuery插件,让你的网页用户直接回到顶部。
jquery锚点带动画跳转和返回顶部方便定位插件
网站右下角的返回顶部悬浮插件,效果很炫,代码量很少,可以直接运行