创建一个平滑跳转到子导航菜单
兼容性
现代浏览器如Chrome浏览器,Firefox和Safari浏览器 IE 9、8进行了测试。i8以下未测试。
要添加到您的网站,只需包括最新的jQuery库,连同jquery.jumpto.js,并将jumpto.css添加到文档中的<HEAD>,并确保你的内容有一个标高符合下面的结构:
<div class="page_container"> <div class="jumpto-block"> <h2>Header 1</h2> <h3>SubHeader 1</h3> .... <h3>SubHeader 2</h3> .... </div> <div class="jumpto-block"> <h2>Header 2</h2> <h3>SubHeader 1</h3> ... </div> </div>
所有你需要的仅仅是一切包装与容器,在这种情况下,我裹着它与'page_container“,并确保您包装每个部分与另一格,在这种情况下它是'jumpto块'格。这些“jumpto块'会让插件知道它应该有多少个第一层链接显示在菜单上。一旦做到这一点,只需调用:
$(".page_container").jumpto({
firstLevel: "> h2",
secondLevel: false,
innerWrapper: ".jumpto-block",
offset: 400,
animate: 1000,
navContainer: false,
anchorTopPadding: 20,
showTitle: "Jump To",
closeButton: true
});