當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

设置锚点切换实例

發布時間：2023/12/31 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了设置锚点切换实例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

（圖一）

（圖二）

如上圖所示，這里實現一個功能。

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;});});

加入ＪＳ以后明顯感覺體驗好多了。

總結

以上是生活随笔為你收集整理的设置锚点切换实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

实例