原生JS實現頁面內定位
需求:點選跳轉到頁面指定位置
<div id="test">點選跳轉到此處</div>
【法一】:
利用a標籤的錨點跳轉
<a href="#test">點選跳轉</a>由於錨點跳的原理是改變雜湊值,所以會改變url 【法二】: 用js的scrollIntoView方法
document.getElementById('test').scrollIntoView()此方法可以讓當前的元素滾動到瀏覽器視窗的可視區域內,不會改變url,但會有相容問題 【法三】:(推薦) 獲取id為test的元素距離父元素頂部的位置,即offsetTop, 改變父元素的scrollTop (父元素有定位,可滾動)
document.querySelector('.scrollElement').scrollTop = document.getElementById('test').offsetTop;
相關推薦
原生JS實現頁面內定位
需求:點選跳轉到頁面指定位置 <div id="test">點選跳轉到此處</div> 【法一】: 利用a標籤的錨點跳轉 <a href="#test">點選跳轉</a> 由於錨點跳的原理是改變雜
JS實現頁面快速定位
今天在分享一個非常小但是很實用的js效果:頁面快速定位實現效果:點選頁面按鈕,即可跳轉到指定位置話不多少,貼程式碼:<div class="button"><a href="#aaa">我是一個跳轉按鈕</a></div>跳轉指
js實現頁面開啟自動定位到指定元素位置
1.場景重現:我一個頁面很長很長,是分一個模組一個模組的,現在有需求是要求從特定場景進入頁面時,自動定位到第N個模組。 2.實現方法:第一步在需要展示的模組的最外層的元素上新增一個標記,可以是class 也可以是id。然後通過原生方法獲取到這個元
原生js實現圖片詳情頁面放大鏡
最近的網站專案需要實現這個放大鏡,在網上也下載了一些實現了的程式碼,不過感覺比較笨重,就自己寫了一次,實現了,需要的朋友可以拿去用; 以下是html部分: <!DOCTYPE html> <html> <head> <met
JS實現頁面進入、返回定位到具體位置
其實瀏覽器也自帶了返回的功能,也就是說,自帶了返回定位的功能。正常的跳轉,返回確實可以定位,但是有些特殊場景就不適用了。例如,某些元素是在某種情況下才加上的,又或者多級定位。 目前,我知道的返回定位到具體位置有兩種方法: ①利用id定位,在跳轉的時候帶上某個模組的i
原生js實現拖動滑塊驗證
cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的,各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證: <!DOCTYPE html> <html lang="en"> <he
原生js實現outerWidth()方法,用到getComputedStyle
turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at
原生js實現form表單序列化
defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:
h5原生js實現輪播圖
list sla head log startx creat ase hit eve 預覽地址:http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l
原生js實現數據單向綁定
web 名稱 target 接收參數 .org desc ctype html fin Object.defineProperty()方法直接在對象上定義一個新屬性,或修改對象上的現有屬性,並返回該對象。 Object.defineProperty(obj, prop, d
如是使用JS實現頁面內容隨機顯示
js之前有個客戶咨詢我,因為他們公司的業務員有多個人,但公司網站的聯系方式板塊裏只夠放一個人的信息,所以就想能不能實現這個聯系方式信息隨機顯示,對於業務或客服人員來說也能做到分配均勻公平。本文我們將和大家一起分享,如何使用js控制實現頁面內容隨機顯示。這裏我以本地的蟬知建站系統為例,給大家演示一下實現流程。首
原生js實現清除子元素節點
spa class document cnblogs ech child mov log tor var table = document.body.querySelector(‘.mui-table-view‘);
原生JS實現tab切換--web前端開發
soft 楊冪 microsoft hidden isp 老婆 tex oct rip tab切換非常常見,應用非常廣泛,比較實用,一般來說是一個網站必不可少的一個效果。例如:https://123.sogou.com/中的一個tab部分: 1、案例源代碼 <!DO
原生js實現輪播
tex tom enter utf-8 定義 radi absolut tco query <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
js實現點擊定位最頂端
func math body ret turn script doc speed top //------------------------------------點擊按鈕------------------------------------ <span onCl
原生js實現的瀑布流布局
n) top 開始 rrh lang java ansi return 一個 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
原生JS實現增加刪除class
doctype [0 cls hasclass sna pla class ctype reg 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css
JQuery&原生js ——實現剪刀石頭布小遊戲
原生 type space 封裝 jquer 石頭 jquery java .com jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫( 或JavaScript框架)。jQuery設計的宗旨是&ldqu
用wow.js實現頁面滾動時觸發animate.css動畫特效
偏移量 true fin 滾動 cdn lock src 代碼 splay 很高興在2017/10/14發表了自己的第一個博客隨筆,不管你們怎麽想,我自己覺得逼格瞬間高了起來。哈哈哈,哈撒尅。 有時候項目需要一些動畫來提升用戶體驗,吸引用戶註意力。這時wow是個
原生JS實現放大鏡效果
use 瀏覽器 賦值 uri 字符串 () solid adding clas 效果: 1、 鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖 2、 鼠標移動時右邊的大圖片也會局部移動 放大鏡的關鍵原理: 鼠標在小圖片上移動時,通過捕捉鼠標在小圖片上的位置,定位大圖片的相