`
Jason(aijun)
  • 浏览: 86705 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

页内锚链接

阅读更多

关键字: 锚

链接有两种,一种是不同页面间的链接。另外一种是页内链接,我们一般称为页内锚链接。
1.加锚链
  定义好“锚”以后,将链接指向锚位置的链接形式如下:
  <a href=″#id″>....</a>,即以#再加上id格式。
  如:
  <a href=″#chapter1″>第一章</a>
  <a href=″#chapter2″>第二章</a>
  <a href=″#chapter3″>第三章</a>
  ..............
  <div id=″chapter1″>
  ...第一章内容..
  </div>
  <div id=″chapter2″>
  ...第二章内容..
  </div>
  <div id=″chapter3″>
  ...第三章内容..
  </div>
或者写成:
  <a name=″chapter1″>
  ...第一章内容..
  </a>
  <a name=″chapter2″>
  ...第二章内容..
  </a>
  <a name=″chapter3″>
  ...第三章内容..
  </a>

2.引用不同页面内的“锚”
  可能有些朋友要问,以上加的锚链都是在同一个页面之间的,如果是一个页面中的锚链接到同站点或另一个网站的另一个页面中的锚怎么办?很简单,形式为:
  <a href=″URL#id″>....</a>

   如 <a href=″http://netschool.yesky.com/homepage/index.htm#block1″>指向地址: http://netschool.yesky.com/homepage/index.htm文件的第一部分</a>

      或者在action中加上这样的东西,比如:action="....do#id",在action返回后会定位到页面上id为id的位置;

分享到:
评论

相关推荐

    可制作页面锚链接平滑过渡效果的jQuery插件.zip

    在网页设计中,锚链接(Anchor Link)常用于在同一个页面内快速跳转到不同的位置。当用户点击锚链接时,浏览器会立即跳转到页面内的指定位置,但这种跳转往往缺乏平滑的过渡效果,用户体验可能并不理想。为了改善这...

    页面锚链接平滑动画过渡纯JS插件

    锚链接,也称为内部链接或书签,是HTML中的一种特殊链接形式,用于在同一个页面内跳转到不同的位置。它们通常以`#`符号开头,后面跟随目标元素的ID属性值。例如,`&lt;a href="#section1"&gt;Section 1&lt;/a&gt;`将链接到页面中...

    js 文本字符串链接转为锚链接

    首先,我们需要理解什么是锚链接(Anchor Links)。在HTML中,锚链接通常用`&lt;a&gt;`标签表示,用于创建超链接,它可以通过`href`属性指定链接的目标URL。例如: ```html 这是一个链接 ``` 在JavaScript中,如果你有一...

    jQuery 锚链接平滑移动效果

    在网页设计中,锚链接(Anchor Link)常用于页面内部导航,使得用户可以通过点击链接直接跳转到页面内的特定位置。然而,标准的HTML锚链接在跳转时可能会瞬间移动页面,用户体验并不理想。为了解决这个问题,我们...

    可制作页面锚链接平滑过渡效果的jQuery插件

    锚链接(Anchor Links)通常用于页面内部跳转,点击后会直接跳转到页面内相应ID的位置。然而,传统的锚链接跳转通常是瞬间完成,可能会给用户带来不连贯的视觉体验。jquery.anchorScroll.js解决了这个问题,通过平滑...

    如何做好锚链接.docx

    尤其对于大型网站,大量内容页指向首页的锚链接能显著提升首页关键词的排名。 - 可以在非导航区域如页脚声明中使用首页关键词作为锚链接,这样既能提供用户体验,又可优化首页。 - 利用CSS调整HTML代码结构,将...

    jq平滑移动、定位到锚链接

    锚链接是HTML中的一个特性,通过使用`&lt;a&gt;`标签的`href`属性引用页面内的ID来创建,例如`&lt;a href="#section1"&gt;Section 1&lt;/a&gt;`。当用户点击这样的链接时,浏览器会立即跳转到页面中具有相应ID的元素位置,比如`...

    导航向锚链接平滑跳转

    本文将详细讨论“导航向锚链接平滑跳转”这一技术,以及如何通过JavaScript实现这种效果。 首先,我们需要理解“锚链接”的概念。在HTML中,锚链接(也称为书签链接)使用`&lt;a&gt;`标签配合`href`属性中的`#`标识来创建...

    WordPress插件–Link Whisper Pro v2.4.0,内部锚文本链接SEO

    使用它你可以批量添加内部锚文本链接,方便您的SEO工作。详细的功能可以安装后看看。 Link Whisper 是一款智能内部链接工具。在人工智能的支持下,当您开始在 WordPress 编辑器中撰写文章时,Link Whisper 就会开始...

    jquery锚链接的无序列表

    在HTML中,锚链接通常使用`&lt;a&gt;`标签定义,它允许我们在同一页面内或不同页面间跳转。当我们为一个元素添加`id`属性时,就可以创建一个锚点,然后在链接的`href`属性中使用`#`加锚点ID来指向该位置。例如: ```html ...

    菜单置顶swiperjq锚链接

    当我们需要在网页上实现“菜单置顶”功能并结合Swiper.js和jQuery的锚链接功能时,就涉及到一系列的技术细节和步骤。 首先,菜单置顶通常指的是将导航栏固定在页面顶部,即使用户滚动页面,导航栏始终保持可见。这...

    jQuery网页锚链接平滑过渡切换代码.zip

    在网页设计中,锚链接(Anchor Link)常用于页面内部导航,使得用户可以直接跳转到页面的特定位置。然而,传统的HTML锚链接在跳转时可能会瞬间定位,用户体验并不理想。"jQuery网页锚链接平滑过渡滚动切换代码"提供...

    jqueryanchorScrolljs是一款可以制作页面锚链接平滑过渡效果的jQuery插件

    在网页设计中,锚链接(Anchor Link)是一种常见的导航方式,它允许用户通过点击链接直接跳转到页面内的某个特定位置。然而,常规的锚链接跳转可能会造成页面瞬间跳动,用户体验并不理想。为了解决这个问题,`jquery...

    如何做站内和站外锚文本

    - 在创建站内链接时,应当使用被链接页面的主要关键词作为锚文本。例如,如果一个页面的主题是“反向链接”,那么就应该使用“反向链接”作为链接到该页面的锚文本。 3. **优先选择第一次出现的关键词** - 如果...

    JS 获取链接(url)参数以及锚链接(anchor)结合富ajax的应用(ajax前进/后退的问题)

    锚链接通常用于页面内的跳转,如`#section1`,它会使得页面滚动到`&lt;a name="section1"&gt;&lt;/a&gt;`或`&lt;div id="section1"&gt;&lt;/div&gt;`的位置。在Ajax应用中,我们可以监听`hashchange`事件来实现平滑的页面导航,而无需完全...

    smoothscrolljs是一款轻量级的纯JS页面锚链接平滑过渡插件

    4. **应用锚链接**:将`data-scroll`属性添加到你的锚链接上,让`smooth-scroll.js`识别并处理这些链接。 ```html &lt;a href="#section1" data-scroll&gt;Go to Section 1 &lt;div id="section1"&gt;Section 1 Content... ``` ...

    jQuery网页锚链接平滑过渡切换特效代码

    在网页设计中,锚链接(Anchor Link)常用于页面内部导航,使得用户可以通过点击链接直接跳转到页面内的特定位置。然而,传统的锚链接跳转是瞬间完成的,可能会导致用户体验不佳,尤其是在长页面中。为了解决这个...

    toc-加锚链接js适用于长文章

    标题“toc-加锚链接js适用于长文章”指的是在网页中使用JavaScript实现的目录(Table of Contents,简称TOC)锚点链接功能,这个功能特别适用于篇幅较长的文章,可以帮助读者快速定位到他们感兴趣的内容部分。...

    怎样建立网站内部链接完整版资料.pptx

    内部链接是指同一网站域名下的内容页面之间相互链接的结构,它包括频道、栏目和终极内容页之间的链接,以及关键词之间的 Tag 链接。内部链接优化,即站内链接优化,是网站优化的重要组成部分,对大型网站尤其关键。...

    seo链接策略-内部链接对网站的重要性.docx

    这些链接可以是频道、栏目、内容页之间的链接,或者是关键词相关的Tag链接。内部链接的构建是网站内部结构设计的重要组成部分,对于搜索引擎优化(SEO)具有显著影响。 **内部链接的作用** 1. **提升搜索引擎索引...

Global site tag (gtag.js) - Google Analytics