成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

頁面快速定位到指定位置的幾個方法

AlanKeene / 751人閱讀

摘要：但是就頁面定位到指定位置其實還有更好的辦法，就是使用去獲取指定位置的，這樣的話還可以加滑動動畫，使定位的這個過程比較平滑。

需求

頁面上有一排按鈕，懸浮在窗口頂端，不隨頁面滑動而滑動，這一組按鈕分別對應的是頁面的各個部分，點擊按鈕，頁面定位到對應的位置。

需求分析

拿到這個需求，很自然的想到，解決這個最簡單的方法是使用錨點（能靠HTML和css解決的，盡量不使用js

解法

想到使用錨點事情就比較簡單了，借用a標簽的href定位，很快就寫了一個Demo，
完整代碼：https://codepen.io/yangyang11...
關鍵代碼：


  
  
anchor1

  
anchor2

  
anchor3

這時候，點擊懸浮的button，頁面可以實現(xiàn)快速定位。

坑1

點了幾遍之后立馬就發(fā)現(xiàn)了一個坑，因為按鈕是懸浮的，而錨點定位，默認是定位到窗口頂端，這樣定位到的區(qū)域就會有一部分被懸浮的按鈕擋住
如下圖：
原始狀態(tài)：

點擊“錨點1”按鈕之后（黃色框起來的部分就是被遮蓋起來的部分）：

由此引出一個問題，怎么使a標簽的錨點不定位到窗口最頂端?

怎么使a標簽的錨點定位到窗口的任意位置 方法1：

網(wǎng)上搜了一些方法，其中有提到使用:target，主要添加幾行css

#anchor1:target, #anchor2:target, #anchor3:target {
  padding-top: 100px;  // 這里更改padding-top的值使其定位到不同地方
}

效果如下圖：

雖然可以實現(xiàn)文字的不被遮擋，但是實際上，對于固定大小的div來說，很容易影響div的內部布局，故不適用我這里的情況（然而這里的:target在其他地方作用還是非常大的。

方法二

換別的思路，想了個巧辦法，在每個需要定位的節(jié)點前面加一個輔助節(jié)點，輔助節(jié)點的高度可以自定，錨點的實際定位的是這個輔助節(jié)點
完整代碼：https://codepen.io/yangyang11...
關鍵代碼：

  
  

    
    

    anchor1
  

  

    

    anchor2
  

  

    

    anchor3
  

輔助節(jié)點的css:
.assist-div {
  width: 1px;
  height: 1px;
  position: absolute;
  top: -100px; // 這里可以設任意高度 對應錨點最后離窗口頂端的距離
  left: 0;
}

這個方法的優(yōu)點：
(一)輔助節(jié)點可以絕對定位 不影響布局
(二)改變輔助節(jié)點的top值 可以實現(xiàn)錨點定位到窗口任意位置
最后效果截圖：(點擊了“錨點2“按鈕)

坑2

正當我美滋滋的交付任務，坐等1h之后的聚餐的時候，PM來找我說，不行，移動端打開的時候，我切換點了幾下懸浮的按鈕之后，要點很多下返回鍵才能退出頁面。
我：對啊因為每點一次按鈕就在瀏覽器記錄里面添加一條記錄
PM：這不行 需要解決掉
。。。
這是個問題，需要用戶點擊很多下才能退出頁面體驗確實不好，如果想要用戶點擊一次就退出頁面，就得始終保持history只有一條記錄，但是a標簽跳轉的話自動往history加一條記錄，我也不能對此做什么。
。。。
這時候不得不使用js了，
我盯著錨點看了會兒(實際上看了半小時:) )發(fā)現(xiàn):

例如http://shili.com/Demo.html#content1 這樣的url，是可以直接定位到http://shili.com/Demo.html 這個頁面的id為content1的節(jié)點處的，這樣的話，我不使用a標簽，直接使用js去動態(tài)改變url后面的#id 的id，也可以實現(xiàn)定位的效果，并且還能實現(xiàn)瀏覽器只保存一條記錄。

完整代碼：https://codepen.io/yangyang11...
關鍵代碼：

去除a標簽，改為使用div，并添加click：


    
錨點1

    
錨點2

    
錨點3



  function goToAnchor(anchorId) {
    // 使用replace方法可以保證前一次瀏覽不會在瀏覽器中保留記錄
    window.location.replace(window.location.href.split("#")[0] + anchorId);
  }

至此，需求就完成了。
但是就頁面定位到指定位置其實還有更好的辦法，就是使用js去獲取指定位置的offsetTop，這樣的話還可以加滑動動畫，使定位的這個過程比較平滑。我沒有使用這個方法是因為，一我開始就一心想使用錨點結果只能遇坑填坑，二我的頁面中有很多折疊的部分（類似于手風琴效果），所以每次的offsetTop都可能是不一樣的，點擊時都需要去獲取offsetTop的值再移動，比較麻煩而且耗性能。（emmm雖然我一開始就抗拒使用js去解決，最后還是使用了，但是抉擇之下還是使用性能消耗小的比較好
這里也丟一下采用上面這個方法的關鍵代碼

document.getElementById("content").scrollTop = document.getElementById(anchorId).offsetTop - 100;

2019.3.26日更新
使用js去實現(xiàn)的話，還有一種方法，使用：Element.scrollIntoView方法，我試了下，這個方法也很好用，還可以自定義滑動方式，性能上，相較于上面的js方法要好，代碼如下：




    測試

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

轉載請注明本文地址：http://systransis.cn/yun/95574.html

相關文章

  • CSS 最核心的幾個概念

    摘要：本文將講述中最核心的幾個概念，包括盒模型等。塊級元素的默認為，而內聯(lián)元素則是根據(jù)其自身的內容或子元素來決定其寬度。如果該元素的下一個兄弟元素中有內聯(lián)元素通常是文字，則會圍繞該元素顯示，形成類似文字圍繞圖片的效果。 本文將講述 CSS 中最核心的幾個概念，包括：盒模型、position、float等。這些是 CSS 的基礎，也是最常用的幾個屬性，它們之間看似獨立卻又相輔相成。為了掌握它們...

    SwordFly 評論0 收藏0

  • 瀏覽器元素尺寸與位置查詢指南

    摘要：前言這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑算是比較全的一篇文章了在瀏覽器中獲取元素的坐標以及尺寸是非常容易的有非常多種方式來完成這些需求但是雜亂的和很多兼容處理導致了瀏覽器中沒有直接的方式來獲取我們想要的結果仔細想想這個問 前言 這篇文章主要介紹了有關瀏覽器中獲取坐標以及尺寸的幾種途徑,算是比較全的一篇文章了. 在瀏覽器中獲取元素的坐標以及尺寸是非常容易的,有非常多種...

    lei___ 評論0 收藏0

  • HTML5 活動宣傳頁「My Flyme 獨家記憶」開發(fā)實踐總結

    摘要：年前放假的最后一天，我們上線了獨家記憶活動宣傳頁。微信分享主要代碼參考獨家記憶當時光凝固，當回憶定格。這是屬于我和的獨家記憶。 年前放假的最后一天，我們上線了「My Flyme 獨家記憶」 H5 活動宣傳頁。 因種種原因，直到放假前幾天，才突然要求我們參與并開始項目的前端部分。此時大概的情況是：所有數(shù)據(jù)已計算完畢；后端接口已完成待聯(lián)調；交互視覺只出了不到四分之一(一共二十多個頁面)；我...

    Anonymous1 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<