html5主页跳转到登录 html登录跳转页面

前言

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

一、 纯 html 实现

1. 利用 id 为标记的锚点

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

"#aa">跳转到 id 为 aa 标记的锚点

-------------分隔线-------------


  

"aa">a




2. 利用 a 标签的 name 属性作为锚点

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

"#bb" >跳转到 name 为 bb 的 a 标签锚点

-------------分隔线-------------


  "bb">name 为 bb 的 a 标签的锚点
  

"abb">bbb




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

二、 js 实现

1. 利用 scrollTo()

window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 

scrollTo() 可以看看 MDN 中的介绍。话不多说，看下面代码?

「html 部分」:

"linkc">平滑滚动到 c

-------------分隔线-------------


  

"cc">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 部分」:

"goTo()">利用 scrollIntoView 跳转到 d

-------------分隔线-------------


  

"dd">ddd




「js 部分」:

var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

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

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

html>
"en">

  "UTF-8">
  "viewport" content="width=device-width, initial-scale=1.0">
  Document
  


  "#aa">跳转到以 id 为 aa 标记的锚点 a

-------------分隔线-------------


  "aa">hhh
  

"aa">aa


  "#bb" >跳转到 name 为 bb 的 a 标签锚点
  

-------------分隔线-------------


  "bb">name 为 bb 的 a 标签的锚点
  

-------------分隔线-------------


  

bb


  "linkc">平滑滚动到 c
  

-------------分隔线-------------


  

"cc">cc


  "goTo()">利用 scrollIntoView 跳转到 d
  

-------------分隔线-------------


  

"dd">dd


  

-------------分隔线-------------


  




效果图：