亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 3112人閱讀

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

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

 

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

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

簡(jiǎ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>

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

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

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

廢話不說(shuō),先上代碼:

 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)畫(huà)效果.swing:在開(kāi)頭/結(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)頁(yè)面動(dòng)畫(huà)的函數(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)畫(huà)跳轉(zhuǎn)的速度和方式,并且不會(huì)改變地址欄的參數(shù),相對(duì)來(lái)說(shuō)比較優(yōu)雅.墻裂建議使用此方法!over...

 

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1587.html

相關(guān)文章

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

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

    AlanKeene 評(píng)論0 收藏0

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

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

    SillyMonkey 評(píng)論0 收藏0

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

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

    silvertheo 評(píng)論0 收藏0

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

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

    diabloneo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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