整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滾動超過一屏，返回頂部按鈕出現(xiàn)，反之隱藏
if(toTop>=winHeight){
topBtn.style.display = 'block';
}else {
topBtn.style.display = 'none';
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷是否到達(dá)頂部，到達(dá)頂部停止?jié)L動，沒到達(dá)頂部繼續(xù)滾動
if(toTop == 0){
clearInterval(timer);
}else {
// 設(shè)置滾動速度
var speed = Math.ceil(toTop/5);
// 頁面向上滾動
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}到頂部的功能現(xiàn)在基本上是網(wǎng)頁的標(biāo)配了，當(dāng)你已經(jīng)瀏覽到頁面底部時，一鍵返回頂部的功能確實(shí)非常方便。隨著用戶習(xí)慣的養(yǎng)成，這個功能都是頁面必備的。那么作為一個前端開發(fā)者，我們?nèi)绾螌?shí)現(xiàn)這個實(shí)用又酷炫的功能呢？今天小編幫大家匯總了五種實(shí)現(xiàn)方法，覺得有用記得點(diǎn)贊，轉(zhuǎn)發(fā)哦。
使用錨點(diǎn)鏈接是一種簡單的返回頂部的功能實(shí)現(xiàn)。該實(shí)現(xiàn)主要在頁面頂部放置一個指定名稱的錨點(diǎn)，然后在頁面下方放置一個返回到該錨點(diǎn)的鏈接，用戶點(diǎn)擊該鏈接即可返回到該錨點(diǎn)所在的位置。原理和實(shí)現(xiàn)都很簡單，核心就是通過錨點(diǎn)跳轉(zhuǎn)到指定元素位置，然后把要跳轉(zhuǎn)的元素放到頁面頂部。
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。元素未滾動時，scrollTop的值為0，如果元素被垂直滾動了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度。可以利用scrollTop來實(shí)現(xiàn)回到頂部的功能，修改body的scrollTop。示例如下：
scrollTo(x,y)是js原生的方法，作用是滾動當(dāng)前window中顯示的文檔至（x,y）點(diǎn)。這是很常用的一種方法，設(shè)置scrollTo(0,0)就可以實(shí)現(xiàn)回到頂部的效果。示例如下：
scrollBy(x,y)方法滾動當(dāng)前window中顯示的文檔，x和y指定滾動的相對量。只要把當(dāng)前頁面的滾動長度作為參數(shù)，逆向滾動，則可以實(shí)現(xiàn)回到頂部的效果。
5.scrollIntoView()
Element.scrollIntoView方法可以滾動當(dāng)前元素，使其進(jìn)入瀏覽器的可見區(qū)域。該方法可以接受一個布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對齊（前提是當(dāng)前區(qū)域可滾動）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對齊（前提是當(dāng)前區(qū)域可滾動）。如果沒有提供該參數(shù)，默認(rèn)為true。
使用該方法的原理與使用錨點(diǎn)的原理類似，在頁面最上方設(shè)置目標(biāo)元素，當(dāng)頁面滾動時，目標(biāo)元素被滾動到頁面區(qū)域以外，點(diǎn)擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果。
關(guān)于實(shí)現(xiàn)回到頂部功能的方法就和大家分享到這里，希望能對你的工作有幫助。如果你覺得本篇文章對你有幫助，歡迎點(diǎn)贊，評論，轉(zhuǎn)發(fā)。
當(dāng)用戶進(jìn)行鼠標(biāo)框選選擇了頁面上的內(nèi)容時，把選擇的內(nèi)容進(jìn)行上報。
雖然這需求就一句話的事，但是很顯然，沒那么簡單...
因?yàn)槭髽?biāo)框選說起來簡單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。
簡單總結(jié)，分為以下幾點(diǎn)：
鼠標(biāo)框選包含以下幾點(diǎn)：
老生常談的技術(shù)點(diǎn)了，這里不能用節(jié)流，因?yàn)榭隙ú荒苣闶髽?biāo)選擇的時候，隔一段時間返回一段內(nèi)容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監(jiān)聽和事件處理上。
事件監(jiān)聽，因?yàn)槭髽?biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。
需要使用事件監(jiān)聽對事件作處理。
Range 接口表示一個包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段。
Range 是瀏覽器原生的對象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創(chuàng)建 Range 對象
const range = new Range()
const liDoms = document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結(jié)束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對象
const selection = window.getSelection();
// 添加光標(biāo)選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內(nèi)容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對應(yīng)的值
const range = document.createRange();const range = window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}const range = new Range()Selection 對象表示用戶選擇的文本范圍或插入符號的當(dāng)前位置。它代表頁面中的文本選區(qū)，可能橫跨多個元素。
window.getSelection()錨指的是一個選區(qū)的起始點(diǎn)（不同于 HTML 中的錨點(diǎn)鏈接）。當(dāng)我們使用鼠標(biāo)框選一個區(qū)域的時候，錨點(diǎn)就是我們鼠標(biāo)按下瞬間的那個點(diǎn)。在用戶拖動鼠標(biāo)時，錨點(diǎn)是不會變的。
選區(qū)的焦點(diǎn)是該選區(qū)的終點(diǎn)，當(dāng)你用鼠標(biāo)框選一個選區(qū)的時候，焦點(diǎn)是你的鼠標(biāo)松開瞬間所記錄的那個點(diǎn)。隨著用戶拖動鼠標(biāo)，焦點(diǎn)的位置會隨著改變。
范圍指的是文檔中連續(xù)的一部分。一個范圍包括整個節(jié)點(diǎn)，也可以包含節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分。用戶通常下只能選擇一個范圍，但是有的時候用戶也有可能選擇多個范圍。
一個用戶可編輯的元素（例如一個使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點(diǎn)稱為錨點(diǎn)(anchor)，終點(diǎn)稱為焦點(diǎn)(focus)。
function debounce (fn, time = 500) {
let timeout = null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創(chuàng)建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數(shù)類型
*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
* debounce 防抖函數(shù)
* @param {Function} func 函數(shù)
* @param {number} wait 等待時間
* @param {false} immediate 是否立即執(zhí)行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[]) => any>(
func: F,
wait = 500,
immediate = false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this
const later = function () {
timeout = null
if (!immediate) {
func.apply(context, args)
}
}
const callNow = immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內(nèi)容
* @returns {null | IGetSelectContentProps} 返回選擇的內(nèi)容
*/
const getSelectContent = (): null | IGetSelectContentProps => {
const selection = window.getSelection()
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0)
// 獲取選擇內(nèi)容
const rangeClone = range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
// 創(chuàng)建 div 標(biāo)簽
const container = document.createElement('div')
// div 標(biāo)簽 append 復(fù)制節(jié)點(diǎn)
container.appendChild(rangeClone)
// 如果復(fù)制的內(nèi)容長度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節(jié)點(diǎn)
const isSpNode = hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode = (parent: Element): boolean => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內(nèi)容
* @returns {string} 返回框選的內(nèi)容
*/
const getSelectTextContent = (): string => {
const selection = window.getSelection()
return selection?.toString().trim() || ''
}// 是否時鼠標(biāo)點(diǎn)擊動作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報
selectionchangeMouseTrack = false
})
// 添加 mousedown 監(jiān)聽事件
document.addEventListener('mousedown', () => {
selectionchangeMouseTrack = true
})
// 添加 mouseup 監(jiān)聽事件
document.addEventListener(
'mouseup',
debounce(() => {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監(jiān)聽事件
document.addEventListener(
'selectionchange',
debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監(jiān)聽事件
document.addEventListener('dblclick', () => {
selectionChangeFun()
})
// 添加 contextmenu 監(jiān)聽事件
document.addEventListener(
'contextmenu',
debounce(() => {
selectionChangeFun()
})
)也可以進(jìn)行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
// 鼠標(biāo) down 事件
mousedown: () => {
selectionchangeMouseTrack = true
},
// 鼠標(biāo) up 事件
mouseup: debounce(() => selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: () => selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time = 500) {
let timeout = null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創(chuàng)建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
selectionchangeMouseTrack = true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
selectionChangeFun()
}))
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
selectionchangeMouseTrack = false
console.log('selectContent', selectContent)
})
const getSelectContent = () => {
const selection = window.getSelection();
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0);
// 獲取選擇內(nèi)容
const rangeClone = range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
const container = document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode = getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode = (parent) => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
