设为首页 加入收藏

TOP

jQuery实现返回顶部功能
2014-11-23 23:22:47 来源: 作者: 【 】 浏览:8
Tags:jQuery 实现 返回 顶部 功能

整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图



--------------------------------------分割线 --------------------------------------


--------------------------------------分割线 --------------------------------------


第一种实现


一、JSP或HTML(主体结构)


在body中添加





二、CSS(样式化)



图片自己网上找资源


三、jQuery(动态效果)


<script>
$(document).ready(function() {
//首先将#back-to-top隐藏
$("#back-to-top").hide();


//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function() {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
});


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Android代码实现长按显示波纹外扩.. 下一篇Linux epoll使用例子

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: