html文字向下移动,html文字整体向右移一点

首页 > 实用技巧 > 作者:YD1662023-11-30 02:59:04

前言

有时候,我们想阅读页面中某段精彩的内容,但由于页面太长,用户需要自己滚动页面,查找起来非常麻烦 ,很容易让人失去继续往下阅读的兴趣。这样体验非常不好,所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置,方便用户的阅读。

一、 纯 html 实现1. 利用 id 为标记的锚点

这里作为锚点的标签可以是任意元素。

<ahref="#aa">跳转到id为aa标记的锚点</a> <p>-------------分隔线-------------</p> <divid="aa">a</div> 2. 利用 a 标签的 name 属性作为锚点

这里作为锚点的标签只能是 a 标签。

<ahref="#bb">跳转到name为bb的a标签锚点</a> <p>-------------分隔线-------------</p> <aname="bb">name为bb的a标签的锚点</a> <divid="abb">bbb</div>

注意:当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现(即以 name 为锚点和以 id 为锚点名字相同时),会将后者作为锚点。

二、 js 实现1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果,想具体了解 scrollTo() 可以看看 MDN 中的介绍。

话不多说,看下面代码

「html 部分」:

<aid="linkc">平滑滚动到c</a> <p>-------------分隔线-------------</p> <divid="cc">c</div>

「js 部分」:

varlinkc=document.querySelector('#linkc') varcc=document.querySelector('#cc') functionto(toEl){ //toEl为指定跳转到该位置的DOM节点 letbridge=toEl; letbody=document.body; letheight=0; //计算该DOM节点到body顶部距离 do{ height =bridge.offsetTop; bridge=bridge.offsetParent; }while(bridge!==body) //滚动到指定位置 window.scrollTo({ top:height, behavior:'smooth' }) } linkc.addEventListener('click',function(){ to(cc) }); 2. 利用 scrollIntoView()

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。

下面也直接上代码

「html 部分」:

<aonclick="goTo()">利用scrollIntoView跳转到d</a> <p>-------------分隔线-------------</p> <divid="dd">ddd</div>

「js 部分」:

vardd=document.querySelector('#dd') functiongoTo(){ dd.scrollIntoView() }

注意:此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

下面为了方便看效果,把上面的代码整理在一起。

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> div{ width:600px; height:300px; background-color:pink; } </style> </head> <body> <ahref="#aa">跳转到以id为aa标记的锚点a</a> <p>-------------分隔线-------------</p> <aname="aa">hhh</a> <divid="aa">aa</div> <ahref="#bb">跳转到name为bb的a标签锚点</a> <p>-------------分隔线-------------</p> <aname="bb">name为bb的a标签的锚点</a> <p>-------------分隔线-------------</p> <div>bb</div> <aid="linkc">平滑滚动到c</a> <p>-------------分隔线-------------</p> <divid="cc">cc</div> <aonclick="goTo()">利用scrollIntoView跳转到d</a> <p>-------------分隔线-------------</p> <divid="dd">dd</div> <p>-------------分隔线-------------</p> <div></div> </body> <script> varcc=document.querySelector('#cc') varlinkc=document.querySelector('#linkc') functionto(toEl){ //ele为指定跳转到该位置的DOM节点 letbridge=toEl; letbody=document.body; letheight=0; do{ height =bridge.offsetTop; bridge=bridge.offsetParent; }while(bridge!==body) console.log(height) window.scrollTo({ top:height, behavior:'smooth' }) } linkc.addEventListener('click',function(){ to(cc) }); </script> <script> vardd=document.querySelector('#dd') functiongoTo(){ dd.scrollIntoView() } </script> </html>

效果图:

html文字向下移动,html文字整体向右移一点(1)

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.