设置锚点切换实例
（圖一）
（圖二）
如上圖所示，這里實現一個功能。
1-單擊“跳轉鏈接A”，"跳轉鏈接A"添加紅色字體樣式，頁面滾動到A basic位置;
2-單擊“跳轉鏈接B”，"跳轉鏈接B"添加紅色字體樣式，頁面滾動到B high位置;
3-頁面滾動到A basic位置，跳轉鏈接A添加紅色字體樣式。
4-頁面滾動到B high位置， 跳轉鏈接B添加紅色字體樣式。
代碼如下所示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>錨點測試</title></head><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><script>$(function(){window.onscroll=function(){ //頁面滾動的時候var elm1=$("#basic")[0];var elm2=$("#high")[0];var scrolltop = Math.ceil(document.documentElement.scrollTop ||document.body.scrollTop);if (scrolltop >= 0 && scrolltop < elm2.offsetTop-$(".nav").height()) {$(".nav li a").removeClass("on");$(".basic a").addClass("on");}if (scrolltop >= elm2.offsetTop-$(".nav").height()) {$(".nav li a").removeClass("on");$(".high a").addClass("on");}}window.onload=function (){ //頁面加載的時候if (window.location.hash=="#basic") {window.location.hash = "";window.location.hash="basic"}else if(window.location.hash=="#high"){window.location.hash = "";window.location.hash="high"}else{window.location.hash = "";window.location.hash="#basic"}}})</script><style type="text/css">li{display: block;margin-bottom: 4px;width: 100px;height: 20px;background: #eee;text-align: center;}.on{color: red;}</style><body><div class="nav" style="display: flex;display: -webkit-flex;flex-direction: row;justify-content: space-between;position: fixed;margin: 0px 0px;"><li><div class="basic"><a href="#basic">跳轉鏈接A</a></div></li><li><div class="high"><a href="#high">跳轉鏈接B</a></div></li></div><ul id="basic"><li></li><li></li><li>A basic</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul id="high"><li></li><li></li><li>B high</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></body></html>感覺動畫看起來特別生硬，這里我們加入一段ＪＳ代碼
$(document).ready(function() {$(".nav a").click(function() {$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500,easing: "swing"});return false;});});加入ＪＳ以后明顯感覺體驗好多了。
總結
- 上一篇： 鸡鹅鸭雉是什么意思
- 下一篇： 多行文本超出用省略号代替，单击展开全部