페이지 측면에 앵커를 붙이는 방법은 무엇입니까?

Question

이이 링크를 기반으로 http://www.cincinnatiburgerweek.com/

http://www.cincinnatiburgerweek.com/#!drakes/oot2t

, 당신은 어떻게 당신의 메인 페이지를 가질 수 있고 당신이 식당을 클릭하면 다음 별도의 URL이 아닌가요? 대신 메인 페이지 오른쪽의 앵커 링크로 이동합니다. css를 사용하여 주 페이지를이 앵커 위치가 오른쪽에서 벗어난 브라우저 너비에 맞출 수있는 방법은 무엇입니까?

Answer 1

찾고 계시는 분은 Single Page Applications (SPA)입니다.

페이지는 과정에서 어느 시점에서 다시로드하거나 컨트롤을 다른 페이지로 전송을 수행하지 않는 위치 해시 응용 프로그램에서 별도의 논리적 페이지의 인식과 항행을 제공 에 사용될 수 있지만, HTML5 pushState() API도 마찬가지입니다.

가 귀하의 질문에 대답하기 위해, 기본적으로, 단계는 다음과 같습니다

1. 방지 페이지 리디렉션.
2. 브라우저 상태를 업데이트합니다 (새 페이지 시뮬레이션).
3. 관련 콘텐츠를 동적으로로드하십시오.

   var linkAbout = document.querySelector('a[href="/about"]'); 
   
   linkAbout.addEventListener('click', function (e) { 
       // Prevent page redirect. 
       e.preventDefault(); 
       // Update browser state. 
       var stateObj = { foo: "bar" }; 
       history.pushState(stateObj, 'About page', '/about'); 
       // Dynamically load the related content. 
       // Here you will need to send some asynchronous (ajax) request 
       // to the server, get the content and put it on the current page. 
       var container = document.querySelector('#container'); 
       var content = getContent('/about'); 
       container.innerHTML = content; 
   }); 
   

   은 분명히이 요약이며, 여기에 언급되지 않은이 방법에 대한 많은 것들이있다 : 같은

표면적이어야한다.

이 현대적인 접근 방법을 사용하여 웹 응용 프로그램을 구축하는 데 도움이되는 많은 라이브러리와 프레임 워크를 찾을 수 있습니다.

Answer 2

기본적들은 자바 스크립트 ...

• 캡쳐 이벤트에 사용하고,이 경우 데이터 속성에 유지하는 #ID 선택기와 요소 (찾을
• 를 [클릭 등 터치] 단지 HREF에서 #ID)를 배치 비교
• 원활 ...

더 간단한 예) 그 #ID 선택기으로 (페이지에 해당 위치로 전환 소자 페이지의 위치에 관한 516,

https://css-tricks.com/snippets/jquery/smooth-scrolling/

, 그들은 단지 일반 문서 플로우로부터 요소를 제거하고 창 (표시 영역)에 상대적으로 위치 결정 fixed 위치를 사용한다. 그들은 약간의 트릭을 사용하여 수직으로 가운데에 놓았습니다. absolute centering으로 전화하십시오.