国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

頁面中添加錨點(diǎn)的幾種方式

番茄西紅柿 / 3038人閱讀

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

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

 

方法一,使用a標(biāo)簽添加

  1. 通過設(shè)置a標(biāo)簽的href屬性,跳轉(zhuǎn)到頁面中指定id標(biāo)簽的位置
  2. a標(biāo)簽的href屬性值前要增加#來作為標(biāo)識,表示是在當(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)比較突兀,對用戶不友好等...

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

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

廢話不說,先上代碼:

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

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

 

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

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

相關(guān)文章

  • 頁面快速定位到指定位置的幾個(gè)方法

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

    AlanKeene 評論0 收藏0

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

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

    SillyMonkey 評論0 收藏0

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

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

    silvertheo 評論0 收藏0

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

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

    diabloneo 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<