2. 程式人生 > >用錨點anchor和location.reload 實現點選重新整理頁面並同時跳轉到本頁面指定位置

用錨點anchor和location.reload 實現點選重新整理頁面並同時跳轉到本頁面指定位置

阿新 • • 發佈：2019-01-07

群裡看到“如何實現點選重新整理頁面並同時跳轉到本頁面指定位置”這麼一個提問，於是抽空寫了個demo，做了個簡單實現，供大家參考。這裡有2個要求：
1）要重新整理頁面
2）跳轉到頁面指定位置
如果我們簡單用a標籤name屬性，錨點(anchor)來處理的話，只能實現跳轉到頁面指定位置，而不能重新整理。因此，對上述提問，筆者換了下順序，就比較容易實現了。
1）先跳轉到頁面指定位置；（用錨點實現即可）
2）再重新整理頁面；（location.reload(true)即可）

案例程式碼：

<!DOCTYPE html>
<html lang="en">
<
 
head>
    <meta charset="UTF-8">
    <title>Location-Anchor</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
    	.box{width: 990px; margin:0 auto 10px; min-height: 400px; border:1px solid #e2e2e2;}
    	.box .
 
hd{height: 30px; line-height: 30px; font-size: 16px; background:#f5f5f5; padding: 0 15px;}
    </style>
</head>
<body>
<div class="box" style='min-height:0;'>
	<div class="hd">
		<button type="button" onclick="goFloor(1)">Go Floor1</button>
		<button type="button"
 
 onclick="goFloor(2)">Go Floor2</button>
		<button type="button" onclick="goFloor(3)">Go Floor3</button>
		<button type="button" onclick="goFloor(4)">Go Floor4</button>
		<button type="button" onclick="goFloor(5)">Go Floor5</button>
	</div>
</div>
<div class="box">
	<div class="hd"><a name="floor1">Floor 1</a></div>
</div>
<div class="box">
	<div class="hd"><a name="floor2">Floor 2</a></div>
</div>
<div class="box">
	<div class="hd"><a name="floor3">Floor 3</a></div>
</div>
<div class="box">
	<div class="hd"><a name="floor4">Floor 4</a></div>
</div>
<div class="box">
	<div class="hd"><a name="floor5">Floor 5</a></div>
</div>
<script type="text/javascript">
	function goFloor(floor) {
		var url = location.href;
		url = url.indexOf('#floor') > 0 ? url.replace(/\#floor(\d)/, '#floor' + floor) : url + '#floor' + floor;
		location.href = url;
		location.reload(true);
	}
</script>
</body>
</html>

程式碼說明：
1）通過設定location.href = url(帶#a[name])實現錨點跳轉；
2）location.reload(true); 頁面重新載入，實現重新整理功能；
3）構建帶錨點的url，使用了字串正則替換；

頁面是否重新整理驗證：
1）先跳轉到floor3，此時url = …#floor3
2）修改html檔案，把<a name=“floor1”>Floor 1</a>改成<a name=“floor1”>Floor 1 refreshed</a>，儲存檔案
3）點選go floor1按鈕，看頁面floor1標題是否改成了“Floor 1 refreshed”。

相關推薦

用錨點anchor和location.reload 實現點選重新整理頁面並同時跳轉到本頁面指定位置

群裡看到“如何實現點選重新整理頁面並同時跳轉到本頁面指定位置”這麼一個提問，於是抽空寫了個demo，做了個簡單實現，供大家參考。這裡有2個要求： 1）要重新整理頁面 2）跳轉到頁面指定位置 如果我們簡單用a標籤name屬性，錨點(anchor)來處理的話，只能實現跳轉到頁面指定位置，而不能重

Web前端：如何實現選擇select下拉框選中跳轉其他頁面

option chang 前端 實現 cati onchange 下拉框選中 b- class <select onchange="window.location=this.value;"><option value="a.html">用戶管理<

點擊存緩存並跳轉頁面並到跳轉頁面取緩存

get html == mage one mode console spl load 之前頁面的 html： <image bindtap=‘ontTapdetails‘ data-item_data=‘{{item}}‘ class=

spring security實現登入驗證以及根據使用者身份跳轉不同頁面

想關依賴，採用session加redis儲存使用者資訊 <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security

js實現A頁面帶資料跳轉B頁面並返回上一層

要實現從一個頁面A跳到另一個頁面B，js實現就在A的js程式碼加跳轉程式碼 JS跳轉大概有以下幾種方式： 第一種：(跳轉到b.html)<script language="javascrip

loaction.reload(false)和location.reload(true)

每次 true 緩存 oca 提升 cat cati 文檔 沒有 loaction.reload(false)和location.reload(true)差別: loaction.reload(false) 先判斷頁面有沒修改，有的話就從服務器下載頁面，沒有就直接從緩存裏拿

js實現進入頁面後自動跳轉到錨點

是你 .com get targe aid split www. tps com $(function(){ var url = window.location.toString();//進這個頁面的url var id = url.split(“#”)[1];

用錨點進行HTML頁面內容的跳轉

介紹 我們知道，JavaScript可以實現HTML頁面上非常豐富的事件和動作，比如說點選工具欄某個按鈕時，顯示相應特定的內容並隱藏其他。但在有些Web應用部署的實際情況中，會禁用除了HTML之外的其他程式碼，比如JavaScript和CSS。那如何實現類似的效果呢？ 經過

vue和jq中實現點選任意地方關閉彈窗

       有時候 開發中會遇到這樣一個需求 點選任意地方關閉彈窗    1.先用jq實現效果        // 點選任意地方關閉遮罩層 除了指定區域        $('#最大的父容器區域').bind('click', function(e) { var e = e

利用iframe和location.hash實現跨域

       原理是利用location.hash來進行傳值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改變hash並不會導致頁面重新整理，所

html錨點 點擊跳轉到頁面指定位置

刷新 mlp kml fwe dpf sil ava vlm pyc 本來是在看阮大神寫的ajax教程，突然發現點擊目錄文字會跳轉到相對應的文本內容，於是乎激發了我的興趣。 這個究竟怎麽做的，剛開始看的時候一知半解，找度娘就是：“點擊跳轉到頁面指定位置”，找了下，原來專業術

微信端調取相冊和攝像頭，實現圖片上傳，並上傳到本地服務器

配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時，遇到了圖片上傳的問題，查看了微信的開發者文檔，裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC

用node.js搭建一個靜態資源站 html,js,css正確加載 跳轉也完美實現！

都在 加載 簡單 pipe tps color exec create 包含 昨天剛買了一個服務器想著用來測試一些自己的項目，由於是第一次建站，在tomcat,linux,node.js間想了好久最終因為node搭建比較方便沒那麽麻煩就決定用node.js來搭建網站項目。

React Native中Navigator的基本使用，實現簡單的頁面之間的跳轉和頁面資料傳遞

效果如下：很簡單的例子，大佬勿噴啊...           點選檢視多少錢後，自動跳轉到超市頁面，點選回答價格後，自動跳轉回顧客介面，並傳遞引數回去。   在我使用的0.57.0的版本中，Navigator已被移除，

在servlet中實現彈出提示框，點選確認後跳轉其他頁面

PrintWriter out = response.getWriter();如果成功彈出登陸成功並跳到下一個頁面out.print("<script>alert('登入成功!');window.location.href='跳到登陸成功後的頁面'</sc

element-UI實現分頁器切換頁碼後，點選某行就行跳轉，希望返回後，頁碼還是保持在剛才瀏覽的位置

如上圖所示的操作，使用element-UI的el-pagination外掛來做分頁。核心程式碼如下 <el-pagination @current-change="nextPage" layout="prev, pager, next"

js和jQuery分別實現 單選框、複選框、下拉列表的表單驗證

關於頁面表單驗證:一些簡單的理解單選框/複選框：js程式碼：$(function () { $("#Button").click(function () {var love = document.getElementsByName("love"); for(var i

最簡單的錨點定位 點選a標籤跳轉到頁面指定位置

<div id="aaa"> <p>錨點定位的id和我不一樣</p> </div> <div id="bbb"> <p>錨

錨點標籤的3個頁面跳轉練習頁面

<!DOCTYPE HTML> <html> <head> <title>錨點標籤的練習頁面</title> <meta charset="utf-8"/> <meta keywor

shiro自定義登陸和推出的過濾器，實現登陸之後根據條件跳轉不同頁面，推出登陸根據條件跳轉不同頁面

shiro中我們可以通過自定義過濾器的方式來實現自己想要的結果，比如想要登陸之後跳轉不同頁面 @Bean(name = "shiroFilter") public ShiroFilterFactoryBean getShiroFilterFacto