jquery实现锚跳转后，频繁点击后滚动条失效？

因为问题是代码，太长放不下，请转贴吧帮我看下,谢谢http://tieba.baidu.com/p/3610448467?pid=65027476409&cid=0#65... 因为问题是代码，太长放不下，请转贴吧帮我看下,谢谢
http://tieba.baidu.com/p/3610448467?pid=65027476409&cid=0#65027476409
我简单描述下吧，我做一个滚动时导航可固定到顶部，同时，导航用JS实现锚链接，
由于前者功能需判断scroll的高度，后者又加了一个平滑功能，所以两者冲突了，慢点单击没事儿，频繁点击后导致滚动条不可用,请高人帮忙实现展开

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

匿名用户
推荐于2016-06-09

展开全部

已修复，测试通过，采纳即可。

<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
div.test {
	width: 400px;
	margin: 5px auto;
	border: 1px solid #ccc;
}

div.test strong {
	font-size: 16px;
	background: #fff;
	border-bottom: 1px solid #aaa;
	margin: 0;
	display: block;
	padding: 5px 0;
	text-decoration: underline;
	color: #059B9A;
	cursor: pointer;
}

div.test p {
	height: 400px;
	background: #f1f1f1;
	margin: 0;
}

div#test1 {
	position: absolute;
}

div#test1 span {
	cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	jQuery (function ($)
    {
	    var test1 = $ ("div#test1"), tp = test1.prop ("offsetTop"), win = $ (window);
	    win.scroll (function ()
	    {
		    var top = $ (this).scrollTop ();
		    top = top <= tp ? tp : top;
		    test1.css ("top", top + "px");
	    });
	    
	    var test = $ ("div.test"), doc = $ ("body");
	    var funny = function (tmp)
	    {
		    win.queue ("fx", []).stop ().delay (10).queue (function ()
		    {
			    var speed = (tmp - win.scrollTop ()) / 10;
			    if (speed === win.site[0])
			    {
				    win.queue ("fx", []).stop ();
				    win.scrollTop (tmp);
				    return;
			    }
			    win.scrollTop (win.scrollTop () + speed);
			    win.site.unshift (speed);
			    funny (tmp);
		    });
	    };
	    
	    test1.children ("span").click (function ()
	    {
		    var tmp = test.eq ($ (this).index ()).prop ("offsetTop");
		    win.site = [];
		    funny (tmp);
	    });
	    
	    $ ("div.test strong").click (function ()
	    {
		    var me = $ (this), index = parseInt (me.text ().substr (me.text ().length - 1, 1));
		    test1.children ("span").eq (index - 1).triggerHandler ("click");
	    });
    });
</script>
</head>
<body>
	<div style="height: 200px; width: 500px; background-color: #fcc"></div>
	<div id="test1">
		<span>第1天</span> <span>第2天</span> <span>第3天</span> <span>第4天</span> <span>第5天</span> <span>第6天</span> <span>第7天</span>
	</div>
	<div class="test">
		<a id="header_1"></a> <strong>header_1 --&gt; header_4</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_2"></a> <strong>header_2 --&gt; header_5</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_3"></a> <strong>header_3 --&gt; header_6</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_4"></a> <strong>header_4 --&gt; header_7</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_5"></a> <strong>header_5 --&gt; header_3</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_6"></a> <strong>header_6 --&gt; header_2</strong>
		<p></p>
	</div>
	<div class="test">
		<a id="header_7"></a> <strong>header_7 --&gt; header_1</strong>
		<p></p>
	</div>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery实现锚跳转后，频繁点击后滚动条失效？

其他类似问题

为你推荐：