頁面內錨點定位及跳轉方法總結

  接著上一篇,其實是一個功能,本來感覺挺簡單的一個問題,沒想到遇到兩個坎兒,無語。。。

?

  上一篇是關于scroll事件綁定的問題,這一篇的問題是:點擊錨點跳轉到相應DIV的問題。

  最簡單的方法是錨點用<a>標簽,在href屬性中寫入DIV的id。如下:

<!DOCTYPE  html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

    這種方法的缺點是點擊錨點之后,瀏覽器的URL會發生變化,如果刷新可能會出現問題。 

?

  第二種方式是在js事件中通過window.location.hash="divId"跳轉,但地址也會發生變化,感覺跟第一種方法沒區別,甚至更麻煩。

 

  第三種方法是用animate屬性,當點擊錨點后,頁面滾動到相應的DIV。接著上面的代碼,具體添加如下代碼:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>

  注意:運行上面的腳本的之前,先將為錨點增加相應的id,同時去掉href屬性。   

     $("html, body")可以替換為響應的div,如果不起作用,試著給該div增加overflow:scroll屬性。

?

     另外,腳本可以進一步優化,自己來試試

  這樣做的好處是:URL地址不會變,同時點擊錨點時會自動響應scroll事件,不需要重新綁定。

     ? ? ?缺點是:如果頁面復雜的話,偏移值可能會發生變化需要算法輔助。

?

  第四種方法是用js的srollIntoView方法,直接用:

document.getElementById("divId").scrollIntoView();

  這種方法的好處,是URL不會變,同時能夠響應相應的scroll事件,不需要算法什么的。

?

?

  推介大家用第四種,我依次試了前三種,都有各種問題(可能是頁面較復雜的緣故吧,當然,技術不咋也是。。。) ??

轉載于:https://www.cnblogs.com/ictlight-moving-on-1/p/5753785.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/372519.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/372519.shtml
英文地址,請注明出處:http://en.pswp.cn/news/372519.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于android的水稻葉片特征測量系統,基于Android的水稻葉片特征參數測量系統

基于Android的水稻葉片特征參數測量系統路艷1&#xff0c;肖志勇2&#xff0c;3&#xff0c;楊紅云2&#xff0c;3*&#xff0c;周瓊1&#xff0c;孫玉婷1【摘要】摘要&#xff1a;【目的】提供基于Android的水稻葉片特征參數測量系統&#xff0c;為農學研究提供精準數據。【方…

JAVA學習繪圖顏色及其筆畫屬性設置字體顯示文字

package com.graphics;import java.awt.*; import java.awt.geom.Rectangle2D; import java.util.Date;import javax.swing.*;/*** * author biexiansheng**/ public class DrawString extends JFrame{private Shape rect;//矩形對象private Font font;//字體對象private Date …

lightoj 1044 - Palindrome Partitioning(需要優化的區間dp)

題目鏈接&#xff1a;http://lightoj.com/volume_showproblem.php?problem1044 題意&#xff1a;求給出的字符串最少能分成多少串回文串。 一般會想到用區間dp暴力3個for但是這里的數據有1000&#xff0c;3個for肯定超時的。 但是這題只是判斷回文串有多少個所以可以先預處理一…

對JavaFX Mobile應用程序進行性能分析

注意&#xff1a;本文最初發表于2009年&#xff0c;僅供參考。 請查閱我們其余的JavaFX文章 。 對于每個JavaFX Mobile應用程序開發人員來說&#xff0c;今天都是美好的一天。 你想知道為什么嗎&#xff1f; 因為JavaME SDK 3.0已發布。 根據我午休時聽到的消息&#xff0c;這是…

第六天20160810

a) 形參與實參 一、 形參為基本數據類型&#xff1a;形參改變&#xff0c;實參不變。 二、 形參為引用數據類型&#xff1a;形參改變&#xff0c;實參通常都會改變。 b) 可變長參數&#xff1a;JDK1.5開始出現 一、可變長參數只能用于…

android原生系統開發板,安卓學習必備開發板-Rayeager PX2

由谷歌主導并推動的移動終端操作系統Android&#xff0c;由于其開源開放的特性&#xff0c;自發布之日起便受到全球各大IT廠商的歡迎。在各廠商的熱情推動下&#xff0c;基于Android系統的手機、平板、智能手表等各類產品層出不窮&#xff0c;迅速普及到人們的日常生活&#xf…

變量類型取值范圍

ascii&#xff1a;Oct Dec Hex Char──────────────────────────101 65 41 A102 66 42 B103 67 43 C141 97 61 a142 98 62 b143 99 63 c 取值范圍&#xff1a;-1 ~ 0xFFFFFFFF ~ 全1127 ~ 0x7F255 ~ 0xFF ~ 11111111 char -128 ~ 127 …

熱點中的即時編譯器(JIT)

即時編譯器&#xff08;JIT&#xff09;的概念以及更廣泛的自適應優化是除Java&#xff08;.Net&#xff0c;Lua&#xff0c;JRuby&#xff09;之外的許多語言中眾所周知的概念。 為了解釋什么是JIT編譯器&#xff0c;我想先定義一個編譯器概念。 根據維基百科&#xff0c;編譯…

3.30下午

在另一臺機子安裝VMware workstation12和win8服務器 總是秘鑰不行 很煩轉載于:https://www.cnblogs.com/bgd140206314/p/6647159.html

Java并發性-任務反饋

從我 上一篇 關于java.util.concurrent包的 文章 的結尾處 摘下來 &#xff0c;這很有趣&#xff0c;有時甚至必須在并發任務啟動后從它們那里獲得反饋。 例如&#xff0c;假設一個應用程序必須發送電子郵件批處理&#xff0c;除了使用多線程機制外&#xff0c;您還想知道成功發…

JS中的函數(二):函數參數(你可能不知道的參數傳遞)

前言&#xff1a; 函數分為有參有返回值&#xff0c;有參無返回值&#xff0c;無參無返回值&#xff0c;無參有返回值&#xff1b;那么對于無參數的函數你想使用函數的調用怎么辦呢&#xff1f;如果你想封裝一個代碼&#xff0c;實現多種功能&#xff0c;但是形參大于實參或者實…

jq查找字段忽略html標簽,jQuery過濾HTML標簽并高亮顯示關鍵字的方法

本文實例講述了jQuery過濾HTML標簽并高亮顯示關鍵字的方法。分享給大家供大家參考。具體如下&#xff1a;jQuery實現網頁關鍵字過濾效果&#xff0c;將需要過濾的文字定義在JavaScript中&#xff0c;可定義多個&#xff0c;不過要修改JS代碼為數組&#xff0c;這樣可過濾出多個…

Jmeter參數化 CSV Data Set Config界面說明

Filename&#xff1a;指保存信息的文件目錄&#xff0c;可以相對或者絕對路徑&#xff0c;相對路徑從Jmeter 的啟動目錄(***/bin)路徑。 File Encoding:文件編碼&#xff0c;默認為ANSI&#xff0c;建議設置為utf-8&#xff0c;防止遇見亂碼情況。 Variable Names&#xff1a;參…

java.lang.NoClassDefFoundError:如何解決–第1部分

線程“ main”中的異常java.lang.NoClassDefFoundError是開發Java EE企業版或獨立Java應用程序時可能會遇到的常見難題之一。 根本原因分析和解決過程的復雜性主要取決于Java EE中間件環境的大小。 特別是考慮到各種Java EE應用程序中存在大量的ClassLoader。 我向您建議的一系…

android 日期國際化,Flutter 日期時間選擇類控件及國際化

注意&#xff1a;無特殊說明&#xff0c;Flutter版本及Dart版本如下&#xff1a;Flutter版本&#xff1a; 1.12.13hotfix.5Dart版本&#xff1a; 2.7.0DatePickerFlutter并沒有DatePicker這個控件&#xff0c;需要使用showDatePicker方法彈出日期選擇控件&#xff0c;基本用法如…

英式英語 vs 美式英語

0. 常見不同 日期的表達&#xff1a; 美國&#xff1a;月日年&#xff1b;英國&#xff1a;日月年&#xff1b;1. 發音 schedule&#xff0c;美 [‘sk?d?ul]&#xff0c;英 [???dju?l]pecan&#xff0c;山核桃&#xff0c;英 [‘pi?k(?)n;]&#xff0c;美 [p?’kɑn]a…

Java多線程:線程間通信之volatile與sychronized

由前文Java內存模型我們熟悉了Java的內存工作模式和線程間的交互規范&#xff0c;本篇從應用層面講解Java線程間通信。 Java為線程間通信提供了三個相關的關鍵字volatile, synchronized和final。對于final&#xff0c;我們在博文Java中static關鍵字和final關鍵字中已經介紹。 1…

避免Java中的空指針異常

空指針異常是Java中最常見&#xff0c;最煩人的異常。 在這篇文章中&#xff0c;我想避免這種不希望的異常。 首先讓我們創建引發空指針異常的示例 private Boolean isFinished(String status) { if (status.equalsIgnoreCase("Finish")) { return Boolean.TRUE; …

權威發布 鴻蒙涅槃,鴻蒙涅槃 曾圣《鴻蒙》雕塑走進河北美院受追捧

原標題&#xff1a;鴻蒙涅槃 曾圣《鴻蒙》雕塑走進河北美院受追捧2019年10月20日上午10時曾圣《鴻蒙》雕塑作品展——暨河北美院首場新聞媒體發布會在河北美術學院雕塑院舉辦。河北美術學院校長甄忠義、河北美術學院黨委書記高國忠、常務副校長張建敏、黨委副書記甄心恒、副校長…

Rube GoldbergSpring整合

Spring Integration為集成系統所涉及的某些復雜性提供了非常好的抽象-Spring Integration從Integration的角度來看非常適合Facade的定義-簡化了對復雜底層系統的訪問。 為了說明這一點&#xff0c;請考慮一個簡單的系統&#xff0c;該系統僅接收一條消息&#xff0c;然后將其發…