【问题标题】：How to navigate to a section of a page如何导航到页面的某个部分
【发布时间】：2011-03-02 20:01:54
【问题描述】：

我有一个带有链接的登录页面。如何将用户引导到不同页面的某个部分？

主页：

<a href="/sample">Sushi</a>
<a href="/sample">BBQ</a>

示例页面：

<div id='sushi'></div>
<div id='bbq'></div>

单击主页中的“Sushi”或“BBQ”应将用户导航到页面sample 的ID 为sushi 或bbq（分别）的div。

没有 JQuery 可以吗？我不介意使用 JQuery，但使用 html 的更简单的解决方案也可以。

【问题讨论】：

标签： html hyperlink

【解决方案1】：

使用超文本引用和ID标签，

目标文本标题

一些段落文本

目标文本

<h1><a href="#target">Target Text Title</a></h1>
<p id="target">Target Text</p>

【讨论】：

【解决方案2】：

用

包裹你的 div

<a name="sushi">
  <div id="sushi">
  </div>
</a>

并通过

链接到它

<a href="#sushi">Sushi</a>

【讨论】：

【解决方案3】：

我的解决方案：

$("body").scrollspy({ target: ".target", offset: fix_header_height });

$(".target").click(function() {
 $("body").animate(
  {
   scrollTop: $($(this).attr("href")).offset().top - fix_header_height
  },
  500
 );
 return;
});

【讨论】：

【解决方案4】：

使用锚点。

主页：

<a href="/sample#sushi">Sushi</a>
<a href="/sample#bBQ">BBQ</a>

示例页面：

<div id='sushi'><a name="sushi"></a></div>
<div id='bbq'><a name="bbq"></a></div>

【讨论】：

【解决方案5】：

主页

<a href="/sample.htm#page1">page1</a>
<a href="/sample.htm#page2">page2</a>

示例页面

<div id='page1'><a name="page1"></a></div>
<div id='page2'><a name="page2"></a></div>

【讨论】：

【解决方案6】：

使用电话直通部分，它可以工作

<div id="content">
     <section id="home">
               ...
     </section>

通过上面的调用

 <a href="#home">page1</a>

滚动需要 jquery 将 this.. 粘贴到上面的结束正文结束标记..

<script>
  $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                  $('html,body').animate({
                      scrollTop: target.offset().top
                  }, 1000);
                  return false;
              }
          }
      });
  });
</script>

【讨论】：

【解决方案7】：

使用 HTML 的 anchors:

主页：

<a href="sample.html#sushi">Sushi</a>
<a href="sample.html#bbq">BBQ</a>

示例页面：

<div id='sushi'><a name='sushi'></a></div>
<div id='bbq'><a name='bbq'></a></div>

【讨论】：

在 Anchor 中使用名称会给出警告：不推荐使用的 HTML 属性。我认为引用目标元素的 ID 是一种更安全的方法。喜欢这个答案：stackoverflow.com/a/53994391/10703628