>

앵커 메커니즘을 사용하는 일련의 링크가 있습니다 :

<div class="header">
    <p class="menu"><a href="#S1">Section1</a></p>
    <p class="menu"><a href="#S2">Section2</a></p>
    ...
</div>
<div style="width: 100%;">
<a name="S1" class="test">&nbsp;</a>
<div class="curtain">
Lots of text
</div>
<a name="S2" class="test">&nbsp;</a>
<div class="curtain">
lots of text
</div>
...
</div>

다음 CSS를 사용하고 있습니다 :

.test
{
    position:relative; 
    margin: 0; 
    padding: 0; 
    float: left;
    display: inline-block;
    margin-top: -100px; /* whatever offset this needs to be */
}

잘 작동합니다. 물론 링크를 클릭하면 한 섹션에서 다음 섹션으로 점프합니다. 선택한 시작 부분으로 스크롤을 사용하여 부드럽게 전환하고 싶습니다. 섹션.

스택 오버플로에서 CSS3로는 불가능하지만 아직 확인하고 싶습니다. 또한 솔루션이 될 수있는 것이 무엇인지 알고 싶습니다. JS를 사용하게되어 기쁘지만 jQuery를 사용할 수 없습니다. 링크에서 클릭시 기능을 사용하려고 시도했지만 표시 해야하는 div의 "수직 위치"를 검색했지만 실패했습니다. 나는 여전히 JS를 배우고 있으며 내 자신의 해결책을 제시 할만큼 충분히 잘 모른다.

도움말/아이디어가 있으면 대단히 감사하겠습니다.

  • 답변 # 1

    scroll-behavior 사용  CSS 속성 :

    (최신 브라우저에서는 지원되지만Edge에서는 지원되지 않음) :

    a {
      display: inline-block;
      padding: 5px 7%;
      text-decoration: none;
    }
    nav, section {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    nav {
      width: 350px;
      padding: 5px;
    }
    section {
      width: 350px;
      height: 130px;
      overflow-y: scroll;
      border: 1px solid black;
      font-size: 0; 
      scroll-behavior: smooth;    /* <----- THE SECRET ---- */
    }
    section div{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 8vw;
    }
    
    

    <nav>
      <a href="#page-1">1</a>
      <a href="#page-2">2</a>
      <a href="#page-3">3</a>
    </nav>
    <section>
      <div id="page-1">1</div>
      <div id="page-2">2</div>
      <div id="page-3">3</div>
    </section>
    
    

  • 답변 # 2

    일부 답변이 매우 유용하고 유익한 반면, 내가 생각 해낸 답변을 적어 놓을 것이라고 생각했습니다. Alex의 답변은 매우 좋았지 만 CSS의 높이를 CSS로 하드 코딩해야한다는 의미에서 제한적입니다.

    따라서 내가 찾은 솔루션은 JS (jQuery 없음)를 사용하고 실제로 Statckoverflow에서 찾은 비슷한 문제를 해결하기 위해 오버 솔루션의 제거 버전 (거의 최소)입니다.

    HTML

    <div class="header">
        <p class="menu"><a href="#S1" onclick="test('S1'); return false;">S1</a></p>
        <p class="menu"><a href="#S2" onclick="test('S2'); return false;">S2</a></p>
        <p class="menu"><a href="#S3" onclick="test('S3'); return false;">S3</a></p>
        <p class="menu"><a href="#S4" onclick="test('S4'); return false;">S3</a></p>
    </div>
    <div style="width: 100%;">
        <div id="S1" class="curtain">
        blabla
        </div>
        <div id="S2" class="curtain">
        blabla
        </div>
        <div id="S3" class="curtain">
        blabla
        </div>
        <div id="S4" class="curtain">
        blabla
        </div>
     </div>
    
    

    참고 : "거짓 거짓";클릭시 호출에서브라우저가 링크 자체로 이동하지 않도록하고 JS에서 효과를 관리하게하려면 중요합니다.

    JS 코드 :

    <script>
    function scrollTo(to, duration) {
        if (document.body.scrollTop == to) return;
        var diff = to - document.body.scrollTop;
        var scrollStep = Math.PI / (duration / 10);
        var count = 0, currPos;
        start = element.scrollTop;
        scrollInterval = setInterval(function(){
            if (document.body.scrollTop != to) {
                count = count + 1;
                currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep));
                document.body.scrollTop = currPos;
            }
            else { clearInterval(scrollInterval); }
        },10);
    }
    function test(elID)
    {
        var dest = document.getElementById(elID);
        scrollTo(dest.offsetTop, 500);
    }
    </script>
    
    

    정말 간단합니다. 함수 ID에서 고유 ID를 사용하여 문서에서 div의 세로 위치를 찾습니다. 그런 다음 시작 위치 (document.body.scrollTop)와 대상 위치 (dest.offsetTop)를 전달하는 scrollTo 함수를 호출합니다. 일종의 여유 곡선을 사용하여 전환을 수행합니다.

    도움을 주셔서 감사합니다.

    약간의 코딩을 알고 있으면 (때로는 무거운) 라이브러리를 피하고 (프로그래머에게) 더 많은 제어권을주는 데 도움이됩니다.

  • 답변 # 3

    mozzila 만 css에서 간단한 속성을 구현합니다. http://caniuse.com/#search=scroll-behavior

    최소한 JS를 사용해야합니다.

    사용하기 쉽기 때문에 개인적으로 사용합니다 (JQ 사용하지만 추측 할 수 있습니다).

    /*Scroll transition to anchor*/
    $("a.toscroll").on('click',function(e) {
        var url = e.target.href;
        var hash = url.substring(url.indexOf("#")+1);
        $('html, body').animate({
            scrollTop: $('#'+hash).offset().top
        }, 500);
        return false;
    });
    
    

    태그에 클래스 toscroll을 추가

  • 답변 # 4

    누구나 jQuery를 기꺼이 사용하려고하지만 여전히이 질문을 찾고있는 사람이 있다면 다음과 같이 도움이 될 수 있습니다.

    https://html-online.com/articles/animated-scroll-anchorid-function-jquery/

    $(document).ready(function () {
                $("a.scrollLink").click(function (event) {
                    event.preventDefault();
                    $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
                });
            });
    
    

    <a href="#anchor1" class="scrollLink">Scroll to anchor 1</a>
    <a href="#anchor2" class="scrollLink">Scroll to anchor 2</a>
    <p id="anchor1"><strong>Anchor 1</strong> - Lorem ipsum dolor sit amet, nonumes voluptatum mel ea.</p>
    <p id="anchor2"><strong>Anchor 2</strong> - Ex ignota epicurei quo, his ex doctus delenit fabellas.</p>
    
    

  • 이전 android - ListView에서 끝없는 스크롤 구현
  • 다음 ios - 인스트루먼트 (XCode)의 명령 행 인스턴스에서 인증 프롬프트를 제거하는 방법이 있습니까?