jQuery滑移链接FAQ问答效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑移链接FAQ问答效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery滑移链接FAQ问答效果</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.6-min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
	$.localScroll();
	$(".top_links > li > a").click(function () {
		$(".faq > li").removeClass('highlight');
		var str = $(this).attr("href");
		str = "a[name='" + str.substring(1) + "']";
		$(str).parent().addClass('highlight');

	});
});
</script>
<style>
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: .9em;
	}
ul {
	width: 500px;
	list-style-type: none;
	}
.faq li {
	margin-bottom: 50px;
	padding: 10px;
	}
.faq li span.question {
	display: block;
	font-weight: bold;
	}
.highlight {
	background: #ffffe1;
	}
div.top {
	margin-top: 5px;
	}
div.top a {
	background: #cc0000;
	padding: 3px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	}
</style>
</head>
<body>
<div class="links">
	

	<ul class="top_links">
		<li><a href="#1a">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#1b">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#1c">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#1d">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#1e">Lorem ipsum dolor sit amet?</a></li>
	</ul>
	<ul class="top_links">
		<li><a href="#2a">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#2b">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#2c">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#2d">Lorem ipsum dolor sit amet?</a></li>
		<li><a href="#2e">Lorem ipsum dolor sit amet?</a></li>
	</ul>
</div>
<ul class="faq">
	<li><a name="1a"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id velit et urna sagittis dignissim. Proin ut leo. Nulla facilisi. Phasellus gravida rhoncus eros. Aenean feugiat. Etiam malesuada venenatis lorem. In imperdiet. Sed id neque in augue vestibulum porttitor. Cras ut lectus. Proin enim.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="1b"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Quisque nec mauris a lectus mollis ullamcorper. Nulla arcu risus, consectetur ac, varius id, porta ut, lorem. Vestibulum ut diam vel lacus interdum ultrices. Suspendisse vehicula lacus quis leo. Quisque et dui nec tellus scelerisque viverra. Donec fringilla elit laoreet pede. Cras dapibus ornare orci. Donec volutpat, lectus nec tincidunt pulvinar, turpis odio pharetra ipsum, eu convallis est neque ut urna. In hac habitasse platea dictumst. Phasellus eget lectus. Vivamus hendrerit augue. Nunc ut pede at dui cursus blandit. Nullam faucibus. Phasellus at mi. Cras sit amet odio.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="1c"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Cras pede mi, semper nec, suscipit et, auctor eget, dui. Fusce ornare vestibulum ipsum. Suspendisse sed sem. Vivamus nibh. Sed ultrices ornare arcu. Aliquam in eros. Vivamus sollicitudin commodo sem. Quisque at neque ut pede luctus accumsan. Nunc ut enim in magna tempor posuere. Aliquam non enim. Suspendisse viverra tristique eros. Sed ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec lectus. Phasellus sed risus elementum felis scelerisque vehicula. Vestibulum egestas lorem. Duis eget sapien ac erat semper suscipit.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="1d"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: In hac habitasse platea dictumst. In risus. Sed in magna. Nunc hendrerit tincidunt elit. Sed imperdiet, nibh sed venenatis sodales, odio dui dignissim lorem, et rutrum magna tortor et lorem. Nulla dapibus luctus nibh. Integer tristique placerat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris elit. Morbi ullamcorper, eros a venenatis egestas, lorem leo dictum dui, sed vulputate ante libero sed nisi. Cras odio. Sed nunc sapien, laoreet dictum, accumsan vitae, mattis non, diam. Mauris tincidunt.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="1e"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Nunc non orci eget odio suscipit rutrum. Nullam quam neque, tempus at, semper in, semper eu, mi. Nulla eu turpis vitae arcu sagittis iaculis. Fusce ut nunc vel ligula convallis vulputate. Aliquam feugiat dui in risus. Sed hendrerit. Praesent mollis, ligula imperdiet viverra faucibus, diam turpis ullamcorper ipsum, eget posuere velit tellus et turpis. Vivamus facilisis est nec libero. Phasellus at velit. Vivamus sed mauris.</span><div class="top"><a href="#top">Top ^</a></div></li>
</ul>
<ul class="faq">
	<li><a name="2a"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id velit et urna sagittis dignissim. Proin ut leo. Nulla facilisi. Phasellus gravida rhoncus eros. Aenean feugiat. Etiam malesuada venenatis lorem. In imperdiet. Sed id neque in augue vestibulum porttitor. Cras ut lectus. Proin enim.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="2b"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Quisque nec mauris a lectus mollis ullamcorper. Nulla arcu risus, consectetur ac, varius id, porta ut, lorem. Vestibulum ut diam vel lacus interdum ultrices. Suspendisse vehicula lacus quis leo. Quisque et dui nec tellus scelerisque viverra. Donec fringilla elit laoreet pede. Cras dapibus ornare orci. Donec volutpat, lectus nec tincidunt pulvinar, turpis odio pharetra ipsum, eu convallis est neque ut urna. In hac habitasse platea dictumst. Phasellus eget lectus. Vivamus hendrerit augue. Nunc ut pede at dui cursus blandit. Nullam faucibus. Phasellus at mi. Cras sit amet odio.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="2c"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Cras pede mi, semper nec, suscipit et, auctor eget, dui. Fusce ornare vestibulum ipsum. Suspendisse sed sem. Vivamus nibh. Sed ultrices ornare arcu. Aliquam in eros. Vivamus sollicitudin commodo sem. Quisque at neque ut pede luctus accumsan. Nunc ut enim in magna tempor posuere. Aliquam non enim. Suspendisse viverra tristique eros. Sed ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec lectus. Phasellus sed risus elementum felis scelerisque vehicula. Vestibulum egestas lorem. Duis eget sapien ac erat semper suscipit.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="2d"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: In hac habitasse platea dictumst. In risus. Sed in magna. Nunc hendrerit tincidunt elit. Sed imperdiet, nibh sed venenatis sodales, odio dui dignissim lorem, et rutrum magna tortor et lorem. Nulla dapibus luctus nibh. Integer tristique placerat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris elit. Morbi ullamcorper, eros a venenatis egestas, lorem leo dictum dui, sed vulputate ante libero sed nisi. Cras odio. Sed nunc sapien, laoreet dictum, accumsan vitae, mattis non, diam. Mauris tincidunt.</span><div class="top"><a href="#top">Top ^</a></div></li>

	<li><a name="2e"></a><span class="question">Q: Lorem ipsum dolor sit amet?</span><span class="answer">A: Nunc non orci eget odio suscipit rutrum. Nullam quam neque, tempus at, semper in, semper eu, mi. Nulla eu turpis vitae arcu sagittis iaculis. Fusce ut nunc vel ligula convallis vulputate. Aliquam feugiat dui in risus. Sed hendrerit. Praesent mollis, ligula imperdiet viverra faucibus, diam turpis ullamcorper ipsum, eget posuere velit tellus et turpis. Vivamus facilisis est nec libero. Phasellus at velit. Vivamus sed mauris.</span><div class="top"><a href="#top">Top ^</a></div></li>
</ul>
</body>
</html>

JS代码(jquery.scrollTo-1.4.0-min.js):

/** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date:9/11/2008 * @author Ariel Flesler * @version 1.4 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */
;
	(function(h){
	var m=h.scrollTo=function(b,c,g){
	h(window).scrollTo(b,c,g)}
;
	m.defaults={
	axis:'y',duration:1}
;
	m.window=function(b){
	return h(window).scrollable()}
;
	h.fn.scrollable=function(){
	return this.map(function(){
	var b=this.parentWindow||this.defaultView,c=this.nodeName=='#document'?b.frameElement||b:this,g=c.contentDocument||(c.contentWindow||c).document,i=c.setInterval;
	return c.nodeName=='IFRAME'||i&&h.browser.safari?g.body:i?g.documentElement:this}
)}
;
	h.fn.scrollTo=function(r,j,a){
	if(typeof j=='object'){
	a=j;
	j=0}
if(typeof a=='function')a={
	onAfter:a}
;
	a=h.extend({
}
,m.defaults,a);
	j=j||a.speed||a.duration;
	a.queue=a.queue&&a.axis.length>1;
	if(a.queue)j/=2;
	a.offset=n(a.offset);
	a.over=n(a.over);
	return this.scrollable().each(function(){
	var k=this,o=h(k),d=r,l,e={
}
,p=o.is('html,body');
	switch(typeof d){
	case'number':case'string':if(/^([+-]=)?\d+(px)?$/.test(d)){
	d=n(d);
	break}
d=h(d,this);
	case'object':if(d.is||d.style)l=(d=h(d)).offset()}
h.each(a.axis.split(''),function(b,c){
	var g=c=='x'?'Left':'Top',i=g.toLowerCase(),f='scroll'+g,s=k[f],t=c=='x'?'Width':'Height',v=t.toLowerCase();
	if(l){
	e[f]=l[i]+(p?0:s-o.offset()[i]);
	if(a.margin){
	e[f]-=parseInt(d.css('margin'+g))||0;
	e[f]-=parseInt(d.css('border'+g+'Width'))||0}
e[f]+=a.offset[i]||0;
	if(a.over[i])e[f]+=d[v]()*a.over[i]}
else e[f]=d[i];
	if(/^\d+$/.test(e[f]))e[f]=e[f]<=0?0:Math.min(e[f],u(t));
	if(!b&&a.queue){
	if(s!=e[f])q(a.onAfterFirst);
	delete e[f]}
}
);
	q(a.onAfter);
	function q(b){
	o.animate(e,j,a.easing,b&&function(){
	b.call(this,r,a)}
)}
;
	function u(b){
	var c='scroll'+b,g=k.ownerDocument;
	return p?Math.max(g.documentElement[c],g.body[c]):k[c]}
}
).end()}
;
	function n(b){
	return typeof b=='object'?b:{
	top:b,left:b}
}
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)