成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 3043人閱讀

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

本文檔創(chuàng)建時間:2018-11-7 15:52:28

 

方法一,使用a標簽添加

  1. 通過設(shè)置a標簽的href屬性,跳轉(zhuǎn)到頁面中指定id標簽的位置
  2. a標簽的href屬性值前要增加#來作為標識,表示是在當(dāng)前頁面的內(nèi)部跳轉(zhuǎn)

簡單的案例:

 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>

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

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

 方法二,使用jQuery的animate動畫跳轉(zhuǎn)

廢話不說,先上代碼:

 1 <html>
 2 <head>
 3     <title>title>
 4 <script>
 5     $(document).ready(function () {
 6         //點擊觸發(fā)事件
 7         $("#jumpNow").click(function () {
 8             $("html,body").animate({
 9                 scrollTop: $("#imhere").offset().top//跳轉(zhuǎn)到的位置
10             }, {
11                     duration: 400,//預(yù)定速度
12                     easing: "swing",//動畫效果.swing:在開頭/結(jié)尾移動慢，在中間移動快;"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是實現(xiàn)頁面動畫的函數(shù),功能比較強大,實現(xiàn)一個錨點跳轉(zhuǎn)綽綽有余.想學(xué)習(xí)animate函數(shù)的小伙伴可點擊參考此文檔:https://www.cnblogs.com/yixiaoheng/p/3505638.html

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

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1587.html

相關(guān)文章

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

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

    AlanKeene 評論0 收藏0

  • 返回頂部的幾種實現(xiàn)

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

    SillyMonkey 評論0 收藏0

  • 返回頂部的幾種實現(xiàn)

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

    silvertheo 評論0 收藏0

  • 總結(jié)跨域的幾種方式

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

    diabloneo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<