回到頁面指定位置的三種方式

標(biāo)簽

首先放出html

<body>
<contain class="test1">
<a name="topAnchor"></a>
<div id="top">我是頂部</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</contain>
<footer>
<button id="backTop1">第一種方式回到頂部</button>
<button id="backTop2">第二種方式回到頂部</button>
<button id="backTop3">第三種方式回到頂部</button>
</footer>
</body>

然后具體操作步驟如下

將a標(biāo)簽放到指定元素的附近
然后通過點擊事件生成 a 標(biāo)簽
觸發(fā)a標(biāo)簽事件
刪除a標(biāo)簽

const backTop1 = document.getElementById("backTop1")

backTop1.addEventListener("click", function (e) {
let a = document.createElement("a")
a.href = "#topAnchor"
e.target.appendChild(a)
a.onclick = function (e) {
e.stopPropagation()
}
a.click()
e.target.removeChild(a)
})

效果如下圖所示

效果很明顯，在事件觸發(fā)之后，頁面立馬跑到的頂部，在交互性沒啥要求的時候，這種做法確實沒啥問題，不過要求高了之后就不行了，會顯得有些突兀。

scrollTo()

此 api 需要傳遞 DOM元素相對于window的 left 和 top 的距離，此例子僅展示簡單demo，只考慮 top 坐標(biāo)

當(dāng)然它還有一個 behavior 參數(shù)，將其設(shè)置為 smooth 后，將會出現(xiàn)滑動效果步驟如下：

計算目標(biāo)元素距離頂部的距離
通過事件觸發(fā)

代碼如下：

const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
const y = TOP.offsetTop
const backTop3 = document.getElementById("backTop3")
backTop3.addEventListener("click", function (e) {
window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
})

效果如下圖所示

從效果上來看，相較于a標(biāo)簽，該api支持動畫，使得頁面更絲滑

Element.scrollIntoView()

該 api 相較于上一個，節(jié)點信息更加的明確，操作方法也更加的簡潔，更利于后續(xù)的維護(hù)

代碼如下

const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
backTop2.addEventListener("click", function (e) {
TOP.scrollIntoView({ behavior: "smooth" })
})

效果如下圖所示

從效果上來看，該api和scrollTo的作用是一致的，但是從代碼結(jié)構(gòu)上來說，scrollIntoView會更加的簡潔

以上三種方法是我目前比較常用的，如有不同之處，還望諸君不吝賜教！

作者：pengpeng

鏈接：https://juejin.cn/post/6906142651121139719

來源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

家好，我是江湖哥，今天分享html教程入門級的部分,大神請繞道，小白請點贊，哈哈，言歸正傳：

Html教程：a標(biāo)簽

知識要點：

1. a標(biāo)簽的概念

2. a標(biāo)簽屬性

一：什么是a標(biāo)簽？

a標(biāo)簽的作用：就是用于控制頁面與頁面之間的跳轉(zhuǎn)的

a標(biāo)簽的格式：<a href="指定要跳轉(zhuǎn)的目標(biāo)界面的鏈接">需要展示給用戶看見的內(nèi)容</a>

<a href="https://www.toutiao.com/">江湖哥博客</a>

二：a標(biāo)簽的屬性

a標(biāo)簽中有一個target屬性，這個屬性的作用就是專門用于控制如何跳轉(zhuǎn)

值

描述

_blank

于在新的選項卡中跳轉(zhuǎn)，也就是新建頁面跳轉(zhuǎn)

_self

默認(rèn)。在當(dāng)前選項卡中打開被鏈接文檔，也就是不新建頁面跳轉(zhuǎn)

_parent

在父框架集中打開被鏈接文檔。

_top

在整個窗口中打開被鏈接文檔。

framename

在指定的框架中打開被鏈接文檔。

<a href="https://www.toutiao.com/">可見內(nèi)容</a>
<a href="https://www.toutiao.com/" target=”_blank”>江湖可見博客</a>

a標(biāo)簽中還有一個屬性，叫做title，a標(biāo)簽中的title和img標(biāo)簽中title一樣，都是用來控制鼠標(biāo)懸停時顯示的提示文本內(nèi)容的

<a href="https://www.toutiao.com/" target="_blank" title="點擊會跳轉(zhuǎn)到可見博客首頁">可見</a>

設(shè)置 target 屬性時， top 與 parent 的打開方式十分類似，需仔細(xì)區(qū)分。

比如網(wǎng) A 中鑲嵌了 iframe 網(wǎng)頁 B，網(wǎng)頁 B 又鑲嵌了 iframe 網(wǎng)頁C。

· 如果網(wǎng)頁 C 中連接設(shè)置 target=_parent，則跳轉(zhuǎn)到網(wǎng)頁 B 去掉直接在 A 中嵌入網(wǎng)頁 C 中鏈接頁面。

· 如果網(wǎng)頁 C 中 target=_top ，則直接跳出所有 iframe 框架，直接轉(zhuǎn)向 C 中鏈接頁面

注意點：

1.a標(biāo)簽不僅可以讓文字可以點擊，還可以讓圖片也能夠被點擊。

2.一個a標(biāo)簽必須有一個href屬性，否則a標(biāo)簽不知道要跳轉(zhuǎn)到什么地方

3.如果通過a標(biāo)簽的href屬性指定一個URL地址，那么必須在地址前面加上http://或https://。

4.a標(biāo)簽的href屬性除了可以綁定一個網(wǎng)絡(luò)地址以外，還可以指定一個本地的地址

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>a標(biāo)簽的使用</title>
</head>
<body>
		<a name="top"></a>
		<a href="https://www.toutiao.com/">a是控制界面也頁面的跳轉(zhuǎn)</a><br><br>
		<a href="https://www.toutiao.com/" target="_blank">跳轉(zhuǎn)到新窗口打開</a><br><br>

		<a href="#name1">錨點跳轉(zhuǎn)1</a>&nssp;&nssp;&nssp;<a href="#name2">錨點跳轉(zhuǎn)2</a>


		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		這是一個錨點跳轉(zhuǎn)文字1 <a name="name1"></a>   <a href="#top">返回頂部</a>

	<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		這是一個錨點跳轉(zhuǎn)文字2 <a name="name2"></a>   <a href="#top">返回頂部</a>
</body>
</html>

關(guān)注我，點擊下面鏈接，即可看視頻

大家介紹如何通過 JS/CSS 實現(xiàn)網(wǎng)頁返回頂部效果。

CSS 按鈕樣式：

#myBtn {

display: none; /* 默認(rèn)隱藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 設(shè)置背景顏色，你可以設(shè)置自己想要的顏色或圖片 */

color: white; /* 文本顏色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圓角 */

}

在線咨詢

上一篇：HTML5常見的基礎(chǔ)標(biāo)簽（6）表單標(biāo)簽的使用
下一篇：CSS的定位機制-浮動及應(yīng)用

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

回到頁面指定位置的三種方式

標(biāo)簽

scrollTo()

Element.scrollIntoView()

Html教程：a標(biāo)簽

一：什么是a標(biāo)簽？

二：a標(biāo)簽的屬性

注意點：

您的項目需求