一款平滑的锚点滚动效果,点击上面的文字导航,可平滑定位到对应的文字段落内容,第一段落里面的红色文字链接可点击直接跳至最后一个段落,右侧顶部的向上箭头有直达顶部的作用。
页面的head部分,需引入页面的样式文件和jQuery库,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
页面的body部分,需分别设置好顶部的导航和文章段落的内容,代码如下:
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">要求</a></li>
<li><a id="link2" class="nav-section2" href="#section2">信念</a></li>
<li><a id="link3" class="nav-section3" href="#section3">接受</a></li>
<li><a id="link4" class="nav-section4" href="#section4">实现</a></li>
<li class="scrollTop"><a href="#"><span class="entypo-up-open">▲</span></a></li>
</ul>
</div>
</nav>
<article>
<h1 id="section1">要求</h1>
<p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
<p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
<p><span class="nav"><a class="nav-section4" href="#section4">跳至实现</a></span></p>
</article>
<article>
<h1 id="section2">信念</h1>
<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
<p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
</article>
<article>
<h1 id="section3">接受</h1>
<p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
<p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
</article>
<article>
<h1 id="section4">实现</h1>
<p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
<p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
</article>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
页面的底部,需设置好锚点定位等事件的响应,代码如下:
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
scrollNav();
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791