您的位置：首页 > Web前端 > JQuery

JQuery开发4-当网页内容大于一页时提示返回顶部

2016-05-27 20:17 501 查看

在网页中我们经常会碰到当我们浏览网页的内容大于一页时，网页中提示返回顶部按钮，当我们点击一下就可以返回到开始浏览网页的顶部，或者某些网页中的广告会随着网页的滑动儿一直固定在网页的某个位置。下面以一个例子来实现这些功能。

该程序的功能有三个

1、当网页内容大于一页时，在浏览器的底部会出现返回顶部按钮

2、该按钮会一直固定在网页的底部，不会随着浏览器在竖直方向平滑页面而消失

3、当点击该按钮时，会自动返回网页的顶部位置

用jquery具体实现如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
<style type="text/css">
.fixed_div {
position: fixed;
bottom: 10px;
width: 400px;
right: 2px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//if ($(window).scrollTop()>50)
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>navH)
{

$("#back-to-top").fadeIn(1000);

}
else
{
$("#back-to-top").fadeOut("fast");
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
</script>
</head>
<body>
<div class="fixed_div" id="back-to-top" style="display: none">
<a href="" >回到顶部</a>
</div>
<p class="nav">这是第一行</p>
<p>这是第二行</p>
<p>这是第三行</p>
<p>这是第四行</p>
<p>这是第五行</p>
<p>这是第六行</p>
<p>这是第七行</p>
<p>这是第八行</p>
<p>这是第十行</p>
<p>这是第十一行</p>
<p>这是第十二行</p>
<p>这是第十三行</p>
<p>这是第十四行</p>
<p>这是第十五行</p>
<p>这是第十六</p>
<p>这是第十七行</p>
<p>这是第十八行</p>
<p>这是第十九行</p>
<p>这是第二十行</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</body>
</html>

 

就可以实现这些功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航