HTML跳转到页面指定位置的几种方法 |
您所在的位置:网站首页 › kindle怎么翻到指定页码 › HTML跳转到页面指定位置的几种方法 |
前言
有时候,我们想阅读页面中某段精彩的内容,但由于页面太长,用户需要自己滚动页面,查找起来非常麻烦 😭,很容易让人失去继续往下阅读的兴趣。这样体验非常不好,所以我们可以想办法 💡 实现点击某段文字或者图片跳转到页面指定位置,方便用户的阅读。 一、 纯 html 实现 1. 利用 id 为标记的锚点这里作为锚点的标签可以是任意元素。 跳转到 id 为 aa 标记的锚点 -------------分隔线------------- a 2. 利用 a 标签的 name 属性作为锚点这里作为锚点的标签只能是 a 标签。 跳转到 name 为 bb 的 a 标签锚点 -------------分隔线------------- name 为 bb 的 a 标签的锚点 bbb注意:当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现(即以 name 为锚点和以 id 为锚点名字相同时),会将后者作为锚点。 二、 js 实现 1. 利用 scrollTo()window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果,想具体了解 scrollTo() 可以看看 MDN 中的介绍。 话不多说,看下面代码👇 「html 部分」: 平滑滚动到 c -------------分隔线------------- c「js 部分」: var linkc = document.querySelector('#linkc') var cc = document.querySelector('#cc') function to(toEl) { // toEl 为指定跳转到该位置的DOM节点 let bridge = toEl; let body = document.body; let height = 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 部分」: 利用 scrollIntoView 跳转到 d -------------分隔线------------- ddd「js 部分」: var dd = document.querySelector('#dd') function goTo(){ dd.scrollIntoView() }注意:此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。 下面为了方便看效果,把上面的代码整理在一起。 Document div { width: 600px; height: 300px; background-color: pink; } 跳转到以 id 为 aa 标记的锚点 a -------------分隔线------------- hhh aa 跳转到 name 为 bb 的 a 标签锚点 -------------分隔线------------- name 为 bb 的 a 标签的锚点 -------------分隔线------------- bb 平滑滚动到 c -------------分隔线------------- cc 利用 scrollIntoView 跳转到 d -------------分隔线------------- dd -------------分隔线------------- var cc = document.querySelector('#cc') var linkc = document.querySelector('#linkc') function to(toEl) { //ele为指定跳转到该位置的DOM节点 let bridge = toEl; let body = document.body; let height = 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) }); var dd = document.querySelector('#dd') function goTo(){ dd.scrollIntoView() }效果图: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |