jQuery 頁面滾動到指定位置顯示返回頂部按鈕

阿新 • • 發佈：2020-12-25

技術標籤：jquery

功能實現：
1、頁面開始時沒有返回頂部按鈕。
2、頁面滾動到指定位置以下，顯示返回頂部按鈕。
3、返回頂部按鈕，固定在頁面。
4、點選返回頂部按鈕後，頁面回到頂部。
5、頁面回到頂部後，返回頂部按鈕隱藏。

需要了解的知識：

jquery方法：

$().scrollTop()

匹配元素相對滾動條頂部的偏移。

屬性:

scrollTop屬性

滾動條到頂部的垂直高度，可寫可讀。

在這裡插入圖片描述

HTML

<body>
	<div id="toTop">回到頂部</div>
</body>

CSS

body {
	height 
: 2000px;
}

#toTop {
	width: 50px;
	height: 50px;
	background-color: #008000;
	font-size: 18px;
	text-align: center;
	/* 固定定位 */
	position: fixed;
	bottom: 20px;
	left: 100px;
	/* 隱藏 */
	display: none;
}

jQuery

<script src="../jquery-3.5.1.js" type="text/javascript" charset="utf-8"> 
</script>
<script type="text/javascript">
	$(window).scroll(function() {
		// 獲取滾動條的垂直滾動值
		var scrolltop = $(window).scrollTop();

		// 垂直滾動值大於500時，顯示回到頂部，否則隱藏
		if (scrolltop >= 500) {
			$("#toTop").show();
		} else {
			$("#toTop").hide();
		}
	});

	// 點選回到頂部,將html或body的scrollTop屬性值設為0 

	$("#toTop").click(function() {
		$("html,body").stop().animate({
			"scrollTop": "0px"
		});
	});
</script>

jQuery 頁面滾動到指定位置顯示返回頂部按鈕

技術標籤：jquery 功能實現： 1、頁面開始時沒有返回頂部按鈕。 2、頁面滾動到指定位置以下，顯示返回頂部按鈕。 3、返回頂部按鈕，固定在頁面。 4、點選返回頂部按鈕後，頁面回到頂部。 5、頁面回到頂部後，返回

vue 頁面向下滾動到指定位置時，頂部顯示懸浮搜尋框

技術標籤：Vue懸浮搜尋框目錄核心程式碼新增對頁面滾動事件的監聽當頁面滾動到指定位置時，顯示搜尋框

vue進入頁面時不在頂部，檢測滾動返回頂部按鈕

1.監測瀏覽器滾動條滾動事件及滾動距離 dmounted() { window.addEventListener(\"scroll\", this.gundong);

web 頁面滾動條的顯示與美化（只考慮Chrome）

web 頁面滾動條的顯示與美化（只考慮Chrome）背景: 想實現當滑鼠懸浮至內容區時，顯示滾動條，移出則不顯示。

jquery頁面搜尋關鍵詞突出顯示

頁面搜尋關鍵詞突出 // 頁面搜尋關鍵詞突出 $(function () { $(\".list_r\").find(\'span\').css({ // 每次搜尋開始，先把所有字型顏色恢復初始狀態

js 返回頂部按鈕

要求：當滑鼠從頂部滾動後，顯示返回頂部按鈕，點選按鈕，頁面平滑滾動到頂部，按鈕隱藏。

Vue實現返回頂部按鈕例項程式碼

前言本文主要介紹了Vue 實現返回頂部按鈕的方法，下面話不多說，來直接看程式碼吧

JavaScript實現返回頂部按鈕案例

本文例項為大家分享了實現返回頂部按鈕的具體程式碼，供大家參考，具體內容如下

JavaScript實現返回頂部按鈕

本文例項為大家分享了實現返回頂部按鈕的具體程式碼，供大家參考，具體內容如下

【JQ】jQuery實現將div中滾動條滾動到指定位置的方法

<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>滾動到指定位置或者滾動到底部或者滾動到最新一條資料</title>

uni-app知識點：頁面滾動到指定位置（即錨點實現）

一、頁面滾動到指定位置（即實現錨點的功能）　　專案需求：在頁面中，不管位於何處，點選評論按鈕頁面滾動到對應的評論位置。

頂部狀態列點選頁面滑動到指定位置之開始無法正確獲取位置資訊問題

1 點選goodsitem 跳轉到詳情頁利用動態路由攜帶goods.iid; 2 跳轉到詳情頁，元件開始建立；created請求資料 ;資料傳遞到子元件商品圖片展示元件；

jQuery實現小火箭返回頂部特效

jquery實現小火箭返回頂部案例，供大家參考，具體內容如下 1. 滾動頁面，當頁面距離頂部超出1000px，顯示小火箭。

Vue列表如何實現滾動到指定位置樣式改變效果

這個需求大概是這樣子：我做的一個聊天Demo，在搜尋框搜尋使用者，可以滾動到指定的使用者。然後成選中狀態。

微信小程式點選滾動到指定位置的實現

公司專案要做一個類似微信通訊錄導航的效果，點選右側字母頁面滾動到相應位置。

顯示回頂按鈕並返回頂部

<template> <div> <p @click=\"backtop\" v-show=\"isShow\">回到頂部</p> </div>

滾動條滾動到指定位置(錨點)的不同實現方式

一、在傳統開發過程中，我們的錨點都是通過a標籤跳轉至對應ID的形式進行需求實現的。

jquery監聽頁面滾動條滾動事件

jquery監聽頁面滾動條滾動事件一、jQuery檢測瀏覽器window滾動條到達底部jQuery獲取位置和尺寸相關函式：$(document).height()獲取整個頁面的高度$(window).height()獲取當前也就是瀏覽器所能看到的頁面的那部分

頁面滾動到某個位置

1.錨點使用錨點連結是一種簡單的返回頂部的功能實現。該實現主要在頁面頂部放置一個指定名稱的錨點連結，然後在頁面下方放置一個返回到該錨點的連結，使用者點選該連結即可返回到該錨點所在的頂部位置

H5頁面，進入頁面某個元素固定滑動至指定位置

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" /> <title>滑動到指定位置</title>