頁面中添加錨點的幾種方式

番茄西紅柿發布于2019-04-23 13:13 / 3026人閱讀

摘要：本文檔創建時間方法一使用標簽添加通過設置標簽的屬性跳轉到頁面中指定標簽的位置標簽的屬性值前要增加來作為標識表示是在當前頁面的內部跳轉簡單的案例設置錨點的標簽跳一跳跳轉到的錨點位置跳到這里此方法的弊端有很多比如會改變

本文檔創建時間:2018-11-7 15:52:28

方法一,使用a標簽添加

通過設置a標簽的href屬性,跳轉到頁面中指定id標簽的位置
a標簽的href屬性值前要增加#來作為標識,表示是在當前頁面的內部跳轉

簡單的案例:

 1 <html>
 2 <head>head>
 3 <body>
 4 
 5 <a href=#miao>跳一跳a>
 6 <br />
 7 
 8 <h3 id=miao>跳到這里..h3>
 9 body>
10 html>

此方法的弊端有很多,比如會改變地址欄參數,跳轉比較突兀,對用戶不友好等...

所以,如果你比較注重細節,有這方面的強迫癥,建議使用下面這種方法.

方法二,使用jQuery的animate動畫跳轉

廢話不說,先上代碼:

 1 <html>
 2 <head>
 3     <title>title>
 4 <script>
 5     $(document).ready(function () {
 6         //點擊觸發事件
 7         $("#jumpNow").click(function () {
 8             $("html,body").animate({
 9                 scrollTop: $("#imhere").offset().top//跳轉到的位置
10             }, {
11                     duration: 400,//預定速度
12                     easing: "swing",//動畫效果.swing:在開頭/結尾移動慢，在中間移動快;"linear": 勻速移動
13                 });
14         });
15 
16 });
17 script>
18 head>
19 
20 <body>
21 
22 <span id=jumpNow>跳一跳span>
23 <br />
24 
25 <h3 id=imhere>跳到這里...h3>
26 body>
27 
28 html>

jQuery的animate是實現頁面動畫的函數,功能比較強大,實現一個錨點跳轉綽綽有余.想學習animate函數的小伙伴可點擊參考此文檔:https://www.cnblogs.com/yixiaoheng/p/3505638.html

此方法可以控制動畫跳轉的速度和方式,并且不會改變地址欄的參數,相對來說比較優雅.墻裂建議使用此方法!over...

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式 asp錨點的屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1587.html

頁面快速定位到指定位置的幾個方法

摘要：但是就頁面定位到指定位置其實還有更好的辦法，就是使用去獲取指定位置的，這樣的話還可以加滑動動畫，使定位的這個過程比較平滑。需求頁面上有一排按鈕，懸浮在窗口頂端，不隨頁面滑動而滑動，這一組按鈕分別對應的是頁面的各個部分，點擊按鈕，頁面定位到對應的位置。需求分析拿到這個需求，很自然的想到，解決這個最簡單的方法是使用錨點（能靠HTML和css解決的，盡量不使用js 解法想到使用錨點...

AlanKeene 2019-08-22 18:10 評論0 收藏0
返回頂部的幾種實現

摘要：返回頂部這里初始狀態的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

SillyMonkey 2019-08-02 15:56 評論0 收藏0
返回頂部的幾種實現

摘要：返回頂部這里初始狀態的返回頂部為不可見，通過判斷頁面滾動高度切換顯示隱藏，的樣式可以自己設計。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對長滾動條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗，而返回頂部的實現也是多種多樣，本文分享幾個案例并給出評價作為引子講一個常用的案例...

silvertheo 2019-08-22 10:48 評論0 收藏0
總結跨域的幾種方式

摘要：比如域的頁面通過嵌入了一個域的頁面，可以通過以下方法實現和的通信通過跨域以上幾種都是雙向通信的，即兩個，頁面與或是頁面與頁面之間的，下面說幾種單項跨域的一般用來獲取數據，因為通過標簽引入的是不受同源策略的限制的。跨域整理@(前端筆記) 跨域只要協議、域名、端口有任何一個不同，都被當作是不同的域。由于瀏覽器的同源策略，其限制之一是不能通過ajax的方法情趣請求不同源的文檔。第二個限制...

diabloneo 2019-08-21 17:52 評論0 收藏0