如何導航到頁面的一部分

我有一個包含鏈接的登錄頁面。如何將用戶導向不同頁面的某個部分？如何導航到頁面的一部分

主頁：

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

示例頁面：

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

點擊在主頁「壽司」或「BBQ」應該將用戶導航到div id爲sushi或bbq（分別）的頁面sample。

是否有可能沒有JQuery？我不介意使用JQuery，但使用html的更簡單的解決方案也可以。

來源

2011-03-02 truthSeekr

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

來源

2011-03-02 20:05:10

設置名稱請鏈接到Mozilla的開發者網絡下一次。 http://w3fools.com – Cilan 2014-09-07 05:27:15

@TheWobbuffet：從遙遠的過去的恥辱（也許你沒有注意到這個帖子已經超過三年半了） – 2014-09-07 12:02:11

通過

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

來源

2011-03-02 20:04:52 RedSoxFan

使用錨與

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

，並鏈接到它包裝你股利。

主頁：

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

來源

2011-03-02 20:04:57 Brandon

它的作品，即使沒有鏈路 – Tebe 2017-03-09 11:39:20

通過使用錨可以使用HTML。如果您想在閱讀HTML'a'標籤時將用戶移至特定部分。

W3Chools：1 | 2

來源

2011-03-02 20:05:35 Robik

首頁

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

來源

2014-06-13 08:08:21

使用穿越部的電話，它的工作原理

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

來源

2014-10-12 16:20:52

我的解決方案：

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

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

來源

2017-06-20 23:14:17

如何導航到頁面的一部分

回答

相關問題