如何导航到页面的某个部分

Question

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

主页：

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

示例页面：

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

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

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

Answer 1

使用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>

Answer 2

用

包裹你的div

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

并通过

链接到它

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

Answer 3

使用锚点。

主页：

<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>

Answer 4

使用电话通过部分，它可以正常工作

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

通过以上方式致电

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

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

<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>

Answer 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>

Answer 6

我的解决方案：

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

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

Answer 7

使用超文本引用和ID标记

目标文本标题

   

某些段落文字

   目标文字

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