Web JS實現頁面返回頂部

阿新 • • 發佈：2019-02-08

右下角“返回頂部“按鈕

之前寫部落格的時候加了個返回頂部的功能

採用js的scrollTop屬性實現了一下這個簡單的功能

當頁面特別長的時候，使用者想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個“返回頂部”的按鈕，使用者點選一下，就可以回到頂部，對於使用者來說，是一個比較好的體驗。

原理：當頁面載入的時候，把返回頂部按鈕定位到頁面的右下角，當頁面從頂部向下滑動不超過300px時，返回頂部按鈕隱藏，當頁面從頂部向下滑動超過300px時，返回頂部按鈕顯示，當用戶點選返回頂部按鈕的時候，頁面返回頂部。

通過下面這段js程式碼就能夠實現上述的功能。

<!DOCTYPE html> 

<html>
<head>
  <meta charset="utf-8">
  <title>槑頭腦的部落格</title>
</head>

<body>
<div id="to_top" title="返回頂部">
  <img src="images/top.png" width="40" height="40" />
</div>
</body>

<style>
body{margin:0; padding:0}
#to_top{right: 30px; bottom 
: 30px; position: fixed; cursor: pointer;}
</style>

<script>
window.onscroll = function(){

  var distance = document.documentElement.scrollTop || document.body.scrollTop; //距離頁面頂部的距離

  if( distance >= 300 ) { //當距離頂部超過300px時，顯示圖片
    document.getElementById('to_top').style.display = "";
  } else 
 { //距離頂部小於300px，隱藏圖片
    document.getElementById('to_top').style.display = "none";
  }

  var toTop = document.getElementById("to_top"); //獲取圖片所在的div

  toTop.onclick = function(){ //點選圖片時觸發的點選事件
    document.documentElement.scrollTop = document.body.scrollTop = 0; //頁面移動到頂部
  }
}
</script>
</html>

下面是返回按鈕的圖片

共

同

進

步

O(∩_∩)O

Web JS實現頁面返回頂部

之前寫部落格的時候加了個返回頂部的功能採用js的scrollTop屬性實現了一下這個簡單的功能當頁面特別長的時候，使用者想回到頁面頂部，必須得滾動好幾次滾動鍵才能回到頂部，如果在頁面右下角有個“返回頂部”的按鈕，使用者

微信小程式 --- 6行程式碼實現頁面返回頂部

效果預覽： js部分： Page({ data: { topNum: 0 }, returnTop: function () { this.setData({

JS實現頁面進入、返回定位到具體位置

其實瀏覽器也自帶了返回的功能，也就是說，自帶了返回定位的功能。正常的跳轉，返回確實可以定位，但是有些特殊場景就不適用了。例如，某些元素是在某種情況下才加上的，又或者多級定位。目前，我知道的返回定位到具體位置有兩種方法： ①利用id定位，在跳轉的時候帶上某個模組的i

如是使用JS實現頁面內容隨機顯示

js之前有個客戶咨詢我，因為他們公司的業務員有多個人，但公司網站的聯系方式板塊裏只夠放一個人的信息，所以就想能不能實現這個聯系方式信息隨機顯示，對於業務或客服人員來說也能做到分配均勻公平。本文我們將和大家一起分享，如何使用js控制實現頁面內容隨機顯示。這裏我以本地的蟬知建站系統為例，給大家演示一下實現流程。首

用wow.js實現頁面滾動時觸發animate.css動畫特效

偏移量 true fin 滾動 cdn lock src 代碼 splay 　　　　很高興在2017/10/14發表了自己的第一個博客隨筆，不管你們怎麽想，我自己覺得逼格瞬間高了起來。哈哈哈，哈撒尅。有時候項目需要一些動畫來提升用戶體驗，吸引用戶註意力。這時wow是個

vue.js實現頁面倒計時跳轉功能

his 首頁 turn return () data col world mit 需求分析：頁面倒計時5秒後進入系統主頁，數字需要實時更新！ <template> <div class=""> <h1>歡迎來到Vue.js

用js實現頁面跳轉的幾種方式

head 註意 ont rem text pla http bsp cat 通過js或者html或者PHP等動態程序都可以方便的實現跳轉，這裏搜集了幾種頁面跳轉的方式js方式的頁面跳轉1.window.location.href方式 <script langua

使用typed.js實現頁面上的寫字功能

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jq

JS實現頁面列印（整體、區域性）

我們在網頁開發過程中經常會有列印頁面的需求，通過JS來實現的方法有很多，這裡我做了一個整理，供大家參考。方式一：window.print() 整體列印 ?

js實現頁面日期時間的動態顯示，精確到秒

直接寫程式碼 <script type="text/javascript"> window.onload=showtime(); function gettime(){ var date = new Date(); var

js實現頁面開啟自動定位到指定元素位置

1.場景重現：我一個頁面很長很長，是分一個模組一個模組的，現在有需求是要求從特定場景進入頁面時，自動定位到第N個模組。 2.實現方法：第一步在需要展示的模組的最外層的元素上新增一個標記，可以是class 也可以是id。然後通過原生方法獲取到這個元

js 實現頁面區域性（或圖片）放大功能(vue)

方法：　　adjustStart1 (e) { e.preventDefault() let event = e.touches if (event.length === 2) { this.styles = 'transform: scale(2

js實現頁面自適應

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv=

js實現頁面table的下載

html： <button id="btn" style="float:left" class="btn btn-info btn-sm" >下載</button> js： $("#btn").click(function(){

js實現頁面列印

js有多種方式實現列印 window.print() window.print();會彈出列印對話方塊，列印的是window.document.body.innerHTML中的內容,但是iframe中無法使用需要用 document.execCommand(“p

簡單實用的JS實現頁面載入完畢之前loading提示效果(相容性較強的loading載入程式碼)

一種簡單實用的JS實現頁面載入完畢之前loading提示效果做成js呼叫即可：一、JS程式碼： var _PageHeight = document.documentElement.clientHeight, _PageWidth = documen

使用html2canvas.js實現頁面截圖並顯示或上傳

　　最近寫專案有用到html2canvas.js，可以實現頁面的截圖功能，但遭遇了許多的坑，特此寫一篇隨筆記錄一下。　　在使用html2canvas時可能會遇到諸如只能擷取視覺化介面、截圖沒有背景色、svg標籤無法擷取等問題，下面詳細的說明一下。一、匯入html2canvas.js 　　這個不需要多

高德地圖web js實現畫多邊形，圓。判斷一個點是否在多邊形或圓裡

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

html2canvas.js實現頁面存圖

年末賬單生成海報圖片匯入js檔案 <script type="text/javascript" src="/lab/js/html2canvas.js"></script> 預設儲存圖片的div和生成部分展示 <!-- 要生成海報的頁面 -

vue中vue-router跳轉頁面返回頂部

第一種方法:main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二種方法：　　在建立router例項時，做如下的配置　savedPosition當且僅當通過瀏覽器的前進/後退按鈕觸

Web JS實現頁面返回頂部

相關推薦