페이지 섹션으로 이동하는 방법

Question

링크가있는 방문 페이지가 있습니다. 사용자를 다른 페이지의 섹션으로 안내하려면 어떻게해야합니까?

메인 페이지 :

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

샘플 페이지 : 메인 페이지에 "스시"또는 "BBQ"에

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

클릭하면 (ID sushi 또는 bbq와 사업부로 사용자를 이동한다 각각) sample 페이지입니다.

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

는

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

Answer 3

사용 앵커에 의해 그것에

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

및 링크와 DIV 랩.

메인 페이지 :

<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

앵커를 사용하여 HTML로 가능합니다. HTML 'a'태그에 대한 읽기에서 사용자를 지정된 섹션으로 이동하려면.

W3Chools : 1 | 2

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

섹션을 통해 전화를 사용하여, 그것은

스루 위

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

전화를 작동

스크롤링이 jquery를 붙여야합니다 .. 위의 body 종료 태그까지 끝내야합니다.

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

내 솔루션 :

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

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