`
舟舟同学
  • 浏览: 44423 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

jQuery 
阅读更多

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

该程序的功能有三个

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>

 

就可以实现这些功能。

0
顶
0
踩
分享到：
| JQuery开发3-jQuery中图片动画效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics