主頁 > 移動端開發 > 如何在同一頁面上向下滾動并顯示章節?

如何在同一頁面上向下滾動并顯示章節?

2021-10-16 15:31:29 移動端開發

我正在開發一個單頁網站,當用戶點擊一個特定的按鈕時,應該向下滾動到頁面的另一個部分。

因為我使用了粘性標題,所以該部分的標題被隱藏在橫幅后面,所以我使用下面的代碼在點擊按鈕時顯示該部分。

但是,這將部分顯示在中間。我希望標題應該在頂部。請幫助我解決這個問題。

向下滾動并顯示在中間的問題

我的代碼:

<a onclick="rollToBottom()。 " id= "按鈕" class="btn ss- btn" data-animation="fadeInUp" data-delay=" 。 8s">閱讀更多</a>/span>
     <script type="text/javascript">/span>
        function scrollToBottom){
          var element = document.getElementById("readmore") 。
               window.scrollTo(0, element.offsetHeight)。
               }
      </script>

uj5u.com熱心網友回復:

我認為CSS屬性scroll-padding-top是你的答案。

uj5u.com熱心網友回復:

你有不同的選擇。

你有不同的選擇來解決這個問題

第一種方法是只使用HTML滾動到具有特定id

的元素。

顯示代碼片段

html{height:3000px; scroll-behavior: smooth;}
#readmore{position: absolute; top:2000px;}
< a href="#readmore">向下滾動</a> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

第二種方法是使用scrollIntoView方法,將指定的元素滾動到瀏覽器視窗的可見區域。

顯示代碼片段

const element = document. getElementById("readmore") 。

document.getElementById('btn'/span>)。 addEventListener('click', () =>  {
  element.scrollIntoView()。
})
html{height:3000px; scroll-behavior: smooth; }
#readmore{position: absolute; top:2000px;}
< button id="btn">向下滾動</button> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

第三種方法是對我希望滾動的具體位置進行硬編碼,在這種情況下,我將其設定為2000px(高度)

顯示代碼片段

const element = document. getElementById("readmore") 。

document.getElementById('btn'/span>)。 addEventListener('click', () => {
    window.scrollTo(0, 2000) 。
})
html{height:3000px; scroll-behavior: smooth; }
#readmore{position: absolute; top:2000px;}
< button id="btn">向下滾動</button> 
<h1 id="readmore">/span>
閱讀更多
</h1>/span>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/318697.html

標籤:

上一篇:是否有辦法在gradle.build檔案中擴展或創建不同的jib配置?

下一篇:僅使用帶有鍵的unordered_map來存盤指標(忽略值)

標籤雲
其他(123570) Java(13369) Python(12731) C(7545) 區塊鏈(7372) JavaScript(7059) 基礎類(6313) AI(6244) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4120) MySQL(4012) Linux(3394) C語言(3288) C++語言(3117) Java相關(2746) 疑難問題(2699) 單片機工控(2479) Web開發(1951) 網絡通信(1793) 數據庫相關(1767) VB基礎類(1755) PHP(1727) 開發(1646) 系統維護與使用區(1617) .NETCore(1586) 基礎和管理(1579) JavaEE(1566) C++(1527) 專題技術討論區(1515) Windows客戶端使用(1484) HtmlCss(1466) ASP.NET(1428) Unity3D(1354) VCL組件開發及應用(1353) HTML(CSS)(1220) 其他技術討論專區(1200) WindowsServer(1192) .NET技术(1165) 交換及路由技術(1149) 語言基礎算法系統設計(1133) WindowsSDKAPI(1124) 界面(1088) JavaSE(1075) Qt(1074) VBA(1048) 新手樂園(1016) 其他開發語言(947) Go(907) HTML5(901) 新技術前沿(898) 硬件設計(872) 區塊鏈技術(860) 網絡編程(857) 非技術版(846) 一般軟件使用(839) 網絡協議與配置(835) Eclipse(790) Spark(750) 下載資源懸賞專區(743)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架,一般用于Android平臺,第一次接觸的朋友,一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化,注解滿天飛的傳統。嘗試將各處代碼片段串聯起來,理清思緒,真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是,Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎?Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口,如何查看輸出,如何使用 keep 設定入口以及使用實體,如何配置壓縮,混淆,校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能:可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯: Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決: <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri,Cursor沒有獲取到對應的屬性

    Android: 背景:呼叫攝像頭,拍攝視頻,指定保存的地址,但是回傳的Cursor檔案,只有名稱和大小的屬性,沒有其他諸如時長,連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料,在記憶體中都是瞬時的,會隨著斷電、關機等丟失資料,因此android系統采用了持久化技術,用于存盤這些“瞬時”資料 持久化技術包括:檔案存盤、SharedPreference存盤以及資料庫存盤,還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式, ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景: Android專案里呼叫攝像頭拍攝視頻,原本使用的 MediaStore.ACTION_VIDEO_CAPTURE, 后來因專案需要,改成了camera2 1.Camera2Video 官方demo有點問題,下載后,不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕, ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新:應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏,開放網路,獨占設備,不需要額外下載軟體,微信掃碼,發現設備。支持標準DLNA協議,支持倍速播放。視頻,音頻,圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費,沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 如何在C中找到鍵/值字典的大小

    我對 C 很陌生,我正在學習使用結構和指標,但我似乎無法弄清楚我在這里做錯了什么。所以我試圖找到每次呼叫 main 函式時都會重置的字典的大小。當我嘗試手動運行代碼時,它會說...

    uj5u.com 2021-10-16 17:05:42 more
  • 如何在將指標作為引數的函式內釋放結構指標

    編輯*我正在學習結構和指標,我正在處理的部分任務要求我釋放 malloc 的空間以用于結構指標。指標作為函式內部的引數傳遞,我想知道是否可以釋放函式內部的空間?指標在主檔案中...

    uj5u.com 2021-10-16 17:05:10 more
  • 同時擁有名稱和指向結構的指標是否有意義?

    typedef struct net_path_s{ uint8 path_len; /* network path length */ uint8 net_path[2 * MAX_ROUTE_LEN]; /* network path */} net...

    uj5u.com 2021-10-16 17:04:34 more
  • Python的記憶體行為

    我有一個串列,它會變得非常大。所以我會將串列保存在我的硬碟上,然后繼續使用一個空串列。我的問題是:當我執行 myList[] 時,舊資料會被洗掉還是會保留在 Ram 上的某個地方。我...

    uj5u.com 2021-10-16 17:04:05 more
  • 僅使用帶有鍵的unordered_map來存盤指標(忽略值)

    我正在實施一種演算法,該演算法檢查網格中的節點是否具有特定值。要存盤有關我已經檢查過的節點的資訊,我想使用 unordered_map 并將指向該節點的指標作為鍵。然后我可以簡單...

    uj5u.com 2021-10-16 17:03:06 more
  • 如何在同一頁面上向下滾動并顯示章節?

    我正在開發一個單頁網站,當用戶點擊一個特定的按鈕時,應該向下滾動到頁面的另一個部分。
    因為我使用了粘性標題,所以該部分的標題被隱藏在橫幅后面,所以我使用下面的代碼在點擊...

    uj5u.com 2021-10-16 15:31:29 more
  • 是否有辦法在gradle.build檔案中擴展或創建不同的jib配置?

    我正在使用jib插件來為我的springboot應用構建docker鏡像。然而,我希望在我的構建檔案中有一個新的任務,它將呼叫不同的構建jib任務。
    其原因是,根據我在 gradle 中創建的任務,...

    uj5u.com 2021-10-16 15:31:10 more
  • 未生成Apollo目錄

    我在初步實施中遇到了困難。
    我的問題是,下面的構建無法生成apollo目錄。
    用這個gradle(應用程式級別)
    plugins {
    id 'com.android.application'/span>
    id 'kotlin-androi...

    uj5u.com 2021-10-16 15:30:57 more
  • 引數型別'PointerEvent'不能分配給引數型別'PointerDownEvent'。

    最近,我更新到了flutter 2.5和最新的androids studio,并試圖將我的flutter專案編譯到android設備上。Android studio向我拋出了下面的錯誤。如果我在終端寫flutter run,編譯到...

    uj5u.com 2021-10-16 15:30:43 more
  • 如何使用then()并在Cypress中獲取數值

    我有一個span元素,它的值是2,我想檢查它的值是否大于0,但在網上查詢并實施了所有方法后,它沒有作業......
    下面是我記錄$span時的控制臺> 2</span>
    </div>

    cy.get(" .badge....

    uj5u.com 2021-10-16 15:28:04 more