jquery实现瞄点定位

一米精品源码

于 2011-11-09 23:29:13 发布

阅读量369

点赞数

分类专栏： JavaScript世界文章标签： javascript ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zhenyaoMilenfan/article/details/84079785

版权

JavaScript世界专栏收录该内容

80 篇文章 0 订阅

订阅专栏

jQuery.fn.anchorGoWhere = function(options){
	var obj = jQuery(this);
	var defaults = {target:1, timer:1000};
	var o = jQuery.extend(defaults,options);
	/*
	var scrollPos;
	if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
		scrollPos = document.documentElement; 
	}else if (typeof document.body != 'undefined') { 
		scrollPos = document.body; 
	}*/

	obj.each(function(i){
		jQuery(obj[i]).click(function(){
			var _rel = jQuery(this).attr("href").substr(1);
			switch(o.target){
				case 1: 
					var targetTop = jQuery("#"+_rel).offset().top;
					jQuery("html,body").animate({scrollTop:targetTop}, o.timer);
					break;
				case 2:
					var targetLeft = jQuery("#"+_rel).offset().left;
					jQuery("html,body").animate({scrollLeft:targetLeft}, o.timer);
					break;
			}
			return false;
		});
	});
};

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>锚点平滑跳转</title>

<script type="text/javascript" language="javascript" src="jquery.js"></script>

<script type="text/javascript" language="javascript" src="function.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){

$(".goTop").anchorGoWhere({target:1});

$(".goDown").anchorGoWhere({target:1});

$(".goNext").anchorGoWhere({target:1});

$(".goFront").anchorGoWhere({target:1});

$(".goVertical").anchorGoWhere({target:2});

});

</script>

<style type="text/css">

ul,li{ list-style:none}

body{line-height:1.5; font-size:12px}

a:link, a:visited{color:#0099FF; text-decoration:none}

a:hover{text-decoration:underline}

.main{width:980px; margin:0 auto}

#menu li{float:left;width:200px; margin-right:1px; border:1px solid #990000; line-height:20px; font-size:1em; text-align:center}

#menu li a{display:block; width:200px; height:20px; text-decoration:none}

#menu a:link, #menu a:visited{ background:#990033; color:#FFFFCC}

#menu a:hover,#menu a:active { background:#FF0000; color:#fff}

fieldset{clear:both;}

.box{height:300px; padding:10px; position:relative}

.box span{position:absolute; left:20px; bottom:10px}

.filler{height:400px; width:1px; background:#ccc; overflow:hidden; clear:both}

.vertical{width:5000px; border:1px solid #ccc; height:80px;padding:10px}

</style>

</head>

<body id="body">

<div class="main">

<ul id="menu">

<li><a href="#menu1" class="goDown">菜单一</a></li>

<li><a href="#menu2" class="goDown">菜单二</a></li>

<li><a href="#menu3" class="goDown">菜单三</a></li>

<li><a href="#menu4" class="goDown">菜单四</a></li>

</ul>

<div class="filler"></div>

<fieldset>

<legend id="menu1">菜单一的内容</legend>

<div class="box">

<p>x men</p>

<p><a href="#menu2" class="goNext">懒人们，点这里看第二章节</a></p>

<span><a href="#body" class="goTop">返回顶部</a></span>

</div>

</fieldset>

<div class="filler"></div>

<fieldset>

<legend id="menu2">菜单二的内容</a></legend>

<div class="box">

<p>x men</p>

<p><a href="#menu3" class="goNext">懒人们，点这里看第三章节</a></p>

<p><a href="#menu1" class="goFront">怎么了，前面一章忘记了？</a></p>

<span><a href="#body" class="goTop">返回顶部</a></span>

</div>

</fieldset>

<div class="filler"></div>

<fieldset>

<legend id="menu3">菜单三的内容</legend>

<div class="box">

<p>x men</p>

<p><a href="#menu4" class="goNext">懒人们，点这里看第四章节</a></p>

<p><a href="#menu2" class="goFront">怎么了，前面一章又忘记了？？</a></p>

<span><a href="#body" class="goTop">返回顶部</a></span>

</div>

</fieldset>

<div class="filler"></div>

<fieldset>

<legend id="menu4">菜单四的内容</a></legend>

<div class="box">

<p>x men</p>

<p><a href="#body" class="goNext">懒人们，看完了吧，该回去了吧</a></p>

<p><a href="#menu3" class="goFront">怎么了，前面一章还忘记了？？？</a></p>

<span><a href="#body" class="goTop">返回顶部</a></span>

</div>

</fieldset>

<div class="filler" style="height:200px"></div>

</div>

<div class="vertical">

<span style="float:left" id="left">

<a href="#right" class="goVertical">还没看过瘾，我带你到右边去看看-></a>

</span>

<span style="float:right" id="right">

<a href="#left" class="goVertical"><-上当了吧，什么也没有，哪儿来哪儿回吧</a>

</span>

</div>

<br />

<br />

<br />

<div style="text-align:center; margin:0 auto">----------------------------------页面底部----------------------------------</div>

</body>

</html>

others:

http://groups.google.com/group/jquery-/msg/c3d7d7b64dd93d7f?dmode=source

http://blog.sina.com.cn/s/blog_4eb66b8f0100bun1.html

http://hi.baidu.com/shenlvjing/blog/item/f9caddf4adb18666dcc4745a.html

一米精品源码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。