1. 程式人生 > >含錨點跳轉的URL地址 JQuery下錨點的平滑跳轉

含錨點跳轉的URL地址 JQuery下錨點的平滑跳轉

1.錨點跳轉簡介 

Edit

錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。比如百度的百科頁面,wiki中的page內容。

我知道實現錨點的跳轉有兩種形式,一種是a標籤+name屬性;還有一種就是使用標籤的id屬性。百度百科就是使用a標籤的name屬性來實現錨點跳轉的。

比如:

<a href=”#2”>波輪洗衣機介紹</a> <a name=”2”></a>

但是上種方法使用了一個空標籤,而且有時候會出現錨點失效。所以建議採用id來繫結錨點,程式碼如下:

<a href=”#
2”>波輪洗衣機介紹 <h2 id=”2”>波輪洗衣機介紹</h2>

2.含錨點跳轉的URL地址 

Edit

【1】關於#

在頁面的製作中,”#”的符號很常見,並且具有通用性。基本上,其表示的含義是id選擇符。例如:CSS中#header{}就表示id為header的標籤的樣式如何;在jQuery中,$(“#header”)表示選擇id為header的標籤為JQuery物件;同樣的,在頁面的URL中,”#”也可以理解為id選擇符之意,也就是頁面跳轉到含URL指向的id的標籤處。

這個地址中末尾有個”#”,這個就相當於告訴瀏覽器要跳轉了,#後面跟著的3表示會在

http://baike.baidu.com/view/121416.htm?pf=1 的頁面中尋找符合”#3”特點的標籤,並且執行跳轉。

【2】關於空錨點指向

如果URL中的”#”後面跟隨的字元id在文中找不到,就會有兩種情況:如果是在當前頁面,除了URL地址變化了,其它的不會改變,頁面不會有跳轉;如果是從其它頁面跳轉過來,則頁面會在頂部顯示,”#”基本就是聾子的耳朵——擺設。

3.JQuery下錨點的平滑跳轉 

Edit

對於錨點的平滑跳轉,在一般的商業性質的網站上,權衡來說,要謹慎使用。

例如:讓頁面平滑滾動到一個id為box的元素處,則JQuery程式碼只要一句話,關鍵位置 如下:

$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)

其中animate為JQuery的自定義動畫方法,$(“#box”).offset().top表示id為box的JQuery物件距離頁面頂部的偏移值,1000表示平滑動畫執行的時間為1000毫秒,也就是1秒。

4.IE下錨點重新整理失效及JQuery下的解決 

Edit

【1】關於錨點重新整理失效

錨點重新整理失效就是指當按下重新整理鍵F5時,即使此時URL的後面就隨錨點,此錨點也是不起作用的。

【2】在JQuery中,不難實現。可以根據URL獲取錨點,從而進一步獲得對應錨點物件,然後再讓頁面的滾動高度為其距離頁面頂部的偏移值就可以了。使得頁面無論是重新載入還是其重新整理,其後面的錨點都起作用。

其js程式碼如下:

$(function(){ var url = window.location.toString(); var id = url.split(“#”)[1]; if(id){ var t = $(“#”+id).offset().top; $(window).scrollTop(t); } });

相關推薦

URL地址 JQuery平滑

1.錨點跳轉簡介  Edit 錨點其實就是可以讓頁面定位到某個位置上的點。在高度較高的頁面中經常見到。比如百度的百科頁面,wiki中的page內容。 我知道實現錨點的跳轉有兩種形式,一種是a標籤+name屬性;還有一種就是使用標籤的id屬性。百度百科就是使用a標籤

輸入url地址回車發生了什麽?

傳輸 就是 str 輸入 信息 發送 發生 mage ip地址 1.輸入url地址後,首先進行DNS解析,將相應的域名解析為IP地址; 2.客戶端根據IP地址去尋找相應的服務器; 3.與服務器進行TCP的三次握手;   所謂三次握手就是客戶端在請求與服務器相連接時,彼此共計

視頻碼:linuxffmpeg 實現視頻

視頻轉碼使用shell快速安裝視頻轉碼器 #!/bin/bash #1、保證系統可以連到外網,需要下載安裝包和依賴包 #2、依賴gcc編譯器 #3、測試命令:ffmpeg -i test.avi out.mp4 set -e ffmDir="/usr/myapp" ffmVer="ffmpeg-3.4.1

JQuery 實現

ani 點擊 內部 jquer 平滑 attr href ima bsp $(‘.nav-jump‘).click(function() { $(‘html,body‘).animate( { sc

android webview網頁上的選按鈕(事件gotointroducion)url連結地址無效沒有反應

本來這個是個簡單事情,可就是便便搞了幾個小時,比如,webview載入網頁,裡面有個按鈕點選跳轉到另一個網頁,當點選的時候按鈕是有反應的,但網頁log列印gotointroducion,有點矇蔽,不知道什麼意思?百度也沒有,搜尋了很久。用了很多種方法都沒有解決,最後還是艱難的解決了。 一些j

框架之TP5 頁面 / 以及url地址

<a href=">路由跳轉 tp框架跳轉需要用{}包住 裡面加上冒號(:) 括號中('控制器名稱/方法名稱') <a href="{:url('Login/xian')}">新增</a>   頁面訪問url地址  url

超連結到不同頁面的連結

在做前端的時候,有時會遇到這樣一種情況:要在此頁面跳轉到另一個頁面的某個地方。這種情況,就可以使用超連結和錨點連結進行調轉了。比如要從index.html頁面的某個超連結調轉到single.html頁面的底部,則此時可在single.html頁面底部新增一個錨點。然後在index.html的超連結里加上此錨點

JS頁面url地址錯誤

在我做的一個介面文件系統中有這樣一個功能,頁面點選一個測試按鈕,將一個地址傳到action中進行處理將結果進行解析輸出到頁面上; 出現了一個問題,頁面點選按鈕時需要跳轉頁面,同時將要處理的url地址傳遞出去,該地址裡面有&?等特殊符號,action接收的時候會理

頁面刷新後,導航欄高亮顯示前的擊位置

欄目 storage 加載 null 隱藏 nload 二級 date split 需求:比如有一個二級或三四級的菜單欄,頁面不跳轉時實現高亮顯示是很容易的,網上有很多這樣的素材。但是頁面一跳轉,新頁面可就記不住你在上一個頁面點擊的位置了,也就不可能高亮顯示。並且很多時候,

jquery.pagination.js添加

ntp reat urn -c css nts llb eric borde 原作者github地址:https://github.com/gbirke/jquery_pagination 在這基礎上加入了跳轉到指定頁。 修改後的jquery.pagination.js

js判斷url換主域名進行鏈接

index code str style pre log sta spa www. //跳轉代碼 var Url001 = window.location.href; var arrUrl = Url001.split("//"); var st

C#利用System.UriURL為絕對地址的方法

分析 sina ted def 微信門戶 內容 str rec 立即執行 本文實例講述了C#利用System.Uri轉URL為絕對地址的方法。分享給大家供大家參考。具體分析如下: 在使用ASPOSE.Word生成Word文檔時可以通過InsertHtml(html)來將圖

JQuery 之Ajax 的重頁面

  //由於封裝之後的ajax,返回 從資料庫得到的資料 ,此時想在這個地方完成頁面的跳轉將不支援,可以通過下面的方法(頁面的JS)間接完成需要跳轉的頁面 <script> $(".deleteSection").click(function(){   let con

django框架中 使用者登入post請求 地址的方法

兩種方式實現使用者登入後網頁跳轉至源地址 常見的網站需要實現登陸後自動跳轉至源地址頁面,在get請求中,可以通過獲取Http中的referer地址實現;而在post請求中則無法直接通過獲取的地址進行跳轉。下面介紹兩種在Django框架中實現post請求跳轉源地址網頁的方式。 首先看一

開發日記2 --通過網頁內連結url正常而直接輸入url則報404錯誤的問題

通過網頁內連結跳轉url正常而直接輸入url則報404錯誤的問題 又經過一天的編寫,現在前臺入口網站已經完成了前三個功能(網站首頁,球隊成員,球隊相簿)我將其釋出到伺服器上後訪問我的ip地址xxx,重定向到xxx/welcome,如圖: 點選球隊成員後頁面轉變

如何設定微信選連結或掃一掃二維碼外部瀏覽器開啟網頁下載

本文章向大家介紹微信自動跳轉瀏覽器開啟APP(APK)下載連結,主要包括微信自動跳轉瀏覽器開啟APP(APK)下載連結使用例項、應用技巧、基本知識點總結和需要注意事項,具有一定的參考價值,需要的朋友可以參考一下。   操作步驟 月牙跳轉是一款基於微信後端開發了一款微信營銷下載推廣助手,

jquery實現連結平滑效果

在html頁面加上錨點連結後寫上以下js程式碼: $(function(){ $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.rep

選iframe 中某頁面的一個按鈕實現到iframe外面的窗體裡面

Default.aspx protected void Page_Load(object sender, EventArgs e) { Response.Redirect("WebForm1.aspx"); }

請求——URL

語法格式:response.sendRediect(String url): 引數的url:表示是目標資源的url地址。 URL重定向的特點: 1 瀏覽器的位址列目依然是發生改變。改變了目標的地址(/redicet/s2) 2URL重定向發了兩次請求。 3因為

絕對地址

讓程式跳轉到絕對地址0x100000去執行?? 要想從0x100000執行,形式只能是:  ((void (*)())0x100000)() 或者 (*((void (*)())0x100000))() 很偏門的知識: &nbs