jquery 锚点跳转、滚动导航菜单和返回顶部
<div class="menu">
<ul>
<li><a href="#AJ-One" class="cur">案件协作</a></li>
<li><a href="#ZT-Two">专题热议</a></li>
<li><a href="#KT-Three">精品课程</a></li>
<li><a href="#JZ-Four">经侦e课</a></li>
<li><a href="#PPT-Five">PPT模板</a></li>
<li><a href="#XZ-six">软件下载</a></li>
<li><a href="#HB-Seven">用户货币排行</a></li>
<li><a href="javascript:;" id="top-btn" >回到顶部</a></li>
</ul>
</div>
<div id="content">
<!-- 案件协作 -->
<div style="margin: 20px 0;height: 290px;" id="AJ-One" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">案件协作</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="case-content"></div>
</div>
<!-- 专题热议 -->
<div style="margin: 20px 0;" id="ZT-Two" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">专题热议</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="special-content"></div>
</div>
<!-- 精品课程 -->
<div style="margin: 20px 0;" id="KT-Three" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">精品课程</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="course-content"></div>
</div>
<!-- 经侦e可课 -->
<div style="margin: 20px 0;" id="JZ-Four" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">经侦e课</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="ecourse-content"></div>
</div>
<!-- PPT模板 -->
<div style="margin: 20px 0;" id="PPT-Five" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">PPT模板</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="ppt-content"></div>
</div>
<!-- 软件下载 -->
<div style="margin: 20px 0;" id="XZ-six" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">软件下载</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="download-content"></div>
</div>
<!-- 用户货币排行 -->
<div style="margin: 20px 0;" id="HB-Seven" class="item">
<div style="font-weight: bold;">
<span style="black;">|</span>
<span style="font-size: 18px;margin-left: 10px;">用户货币排行</span>
<span style="float: right;color: #666;">更多 > </span>
</div>
<div class="currency-content"></div>
</div>
</div>
//锚点滚动 导航菜单
$(document).ready(function () {
$(window).scroll(function () {
var top = $(document).scrollTop(); //获取滚动条的高度
var menu = $(".menu"); //抓取#menu
var items = $("#content").find(".item"); //查找.item
var curId = ""; //当前所在的楼层item #id
items.each(function () {
var m = $(this); //获取当前类
var itemsTop = m.offset().top; //获取当前 类的top偏移量
if (top > itemsTop - 200) {
curId = "#" + m.attr("id");
} else {
return false;
}
});
//给相应的楼层设置cur,取消其他楼层的cur
var curLink = menu.find(".cur");
if (curId && curLink.attr("href") != curId) {
curLink.removeClass("cur");
menu.find("[href=" + curId + "]").addClass("cur");
}
// console.log(top);
});
});
//返回顶部
$(document).ready(function() {
//首先将#top-btn隐藏
$("#top-btn").hide();
//当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
//淡化显示
$("#top-btn").fadeIn(200);
} else {
//淡化隐藏
$("#top-btn").fadeOut(200);
}
});
//回到页面顶部位置
$("#top-btn").click(function() {
//改变滚动条和顶部的高度
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
});
效果图
