부드럽게 위아래로 여러 앵커로 스크롤

저는 Web Dev에 익숙하지 않으며 사이드 탐색 바를 사용하여 여러 앵커로 스크롤 할 수있는 웹 사이트를 만들고 싶습니다.부드럽게 위아래로 여러 앵커로 스크롤

이 내 HTML 코드,

<body> 
<div id="mySideDiv" class="divAnimate"> 
    <p id="head">HYUNJAE<br>WOO</p> 
    <div class="side"><a href="#home">HOME</a></div> 
    <div class="side"><a href="#portfolio">PORTFOLIO</a></div> 
    <div class="side"><a href="#contact">CONTACT</a></div> 
    <div class="side"><a href="#about">ABOUT</a></div> 
</div> 

<div class="mid-cont homePage" id="main"> 
    <article class="panel"><a id="home"></a> 
    <p> Welcome to My Website </p> 
    ... 
    </article> 

    <article class="panel"><a id="portfolio"></a> 
    <p> PORTFORLIO </p><br> 
    ... 
    </article> 

    <article class="panel"><a id="contact"></a> 
    <p> CONTACT </p><br> 
    ... 
</article> 

<article class="panel"><a id="about"></a> 
    <p> ABOUT </p><br> 
    ... 
</article>

나는이 단지 태그로 작업,하지만 내가 앵커로 원활하게 전환/스크롤에게 내가 사이드 바를 클릭 할 때마다 원하는

(내 사이드 바는 고정되어있다). 인터넷을 통해 검색 한 결과 jQuery 또는 javascript를 사용하여 몇 가지 답변을 찾았지 만, 맨 위와 맨 아래로 스크롤 할 때만 작동했습니다. CONTACT (연락처)에서 PORTFOLIO (포트폴리오)로 이동하려 할 때마다 HOME 및 PORTFOLIO 사이에 화면이 배치됩니다. 나는 대답이 아주 분명 할 것 같은 느낌이 들지만, 왜 나는 이해할 수 없다 ... 제발 도와주세요.

출처

2016-12-28 Hyunjae Woo

하나는 문제를 해결할 수 있습니다 질문/7717527/smooth-scrolling-when-click-an-anchor-link –

이와 비슷한 내용 http://stackoverflow.com/questions/34571656/difference-between-current-position-and-scrolled-position-with-jquery/34572021 # 34572021 ?? –

당신이 this 답을 확인 했습니까해야합니까? HTML 코드는 다음과 같습니다 https://css-tricks.com/snippets/jquery/smooth-scrolling/ http://stackoverflow.com/ :이 링크의

<div class="side"><a href="#home" onclick="SmoothScroll()">HOME</a></div> 

function SmoothScroll() { 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    $('html, body').animate({ 
     scrollTop: $(""+target).offset().top 
    }, 2000);}

출처

2016-12-28 09:53:23

내 대답을 확인 했습니까? –

당신은 이러한 기능에 대해 다음 코드를 사용할 수 있습니다

$(".same-page-links").on("click", function(e){ 
    e.preventDefault(); 
    var target = $(this).attr("href"); 
    if($(""+target).length) 
    { 
    var targetOffset = $(""+target).offset().top; 
    $("html, body").animate({"scrollTop": targetOffset}, 500); 
    } 
});//click

를 자, 내가 이러한 모든 링크가 클래스 "같은 페이지 - 링크"가 있다고 가정했다. 그런 링크를 클릭하면 href 속성 또는 다른 속성에서 대상 요소의 ID를 가져올 수 있습니다. 일단 가지고 있다면, 그 요소의 offset().top을 알고 jQuery animate 메소드를 사용하여 해당 오프셋으로 스크롤하면됩니다.

또 하나의 목표는 대상 ID가 포함될 빈 a 요소를 만드는 대신 해당 ID를 해당 기사 자체에 할당해야합니다. 예 : 대신

<article class="panel"><a id="about"></a>

의 이이

<article id="about" class="panel">

출처

2016-12-28 09:47:56

부드럽게 위아래로 여러 앵커로 스크롤

답변

관련 문제