복붙노트

[JQUERY] 앵커 링크를 클릭하면 스크롤 부드럽게

JQUERY

앵커 링크를 클릭하면 스크롤 부드럽게

해결법


  1. 1.업데이트 년 4 월 2018 : 지금이 작업을 수행 할 수있는 기본 방법이있다 :

    업데이트 년 4 월 2018 : 지금이 작업을 수행 할 수있는 기본 방법이있다 :

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
    
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    

    이는 현재는 대부분의 출혈 가장자리 브라우저에서 지원됩니다.

    오래된 브라우저 지원의 경우,이 jQuery를 기술을 사용할 수 있습니다 :

    $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
    
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
    });
    

    그리고 여기에 바이올린는 다음과 같습니다 http://jsfiddle.net/9SDLw/

    대상 요소는 ID를 가지고 있지 않으며, 당신은 그 이름하여에 연결하는 경우, 이것을 사용 :

    $('a[href^="#"]').click(function () {
        $('html, body').animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
        }, 500);
    
        return false;
    });
    

    성능 향상을 위해, 당신은 앵커를 클릭 할 때 매번 실행되지 않습니다 그래서, 그 $ ( 'HTML, 몸) 선택기를 캐시한다 :

    var $root = $('html, body');
    
    $('a[href^="#"]').click(function () {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
    
        return false;
    });
    

    당신이 URL을 업데이트하려면 애니메이션 콜백 내에서 작업을 수행합니다

    var $root = $('html, body');
    
    $('a[href^="#"]').click(function() {
        var href = $.attr(this, 'href');
    
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
    
        return false;
    });
    

  2. 2.올바른 구문은 다음과 같습니다

    올바른 구문은 다음과 같습니다

    //Smooth scrolling with links
    $('a[href*=\\#]').on('click', function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
    
    // Smooth scrolling when the document is loaded and ready
    $(document).ready(function(){
      $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
    });
    

    단순화 : DRY

    function smoothScrollingTo(target){
      $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){     
        event.preventDefault();
        smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
    

    * = \\ # HREF 설명 :


  3. 3.CSS3의 새로운 섹시한 레이저. 이것은이 페이지에있는 모든 방법보다 훨씬 쉽게 더 자바 스크립트를 필요로하지 않는다. 당신은 CSS와 갑자기 모든 링크가 스크롤을 부드럽게 애니메이션이있을 것이다 당신의 자신의 페이지 내의 위치를 ​​가리키는으로 그냥 코드 아래를 입력합니다.

    CSS3의 새로운 섹시한 레이저. 이것은이 페이지에있는 모든 방법보다 훨씬 쉽게 더 자바 스크립트를 필요로하지 않는다. 당신은 CSS와 갑자기 모든 링크가 스크롤을 부드럽게 애니메이션이있을 것이다 당신의 자신의 페이지 내의 위치를 ​​가리키는으로 그냥 코드 아래를 입력합니다.

    html{scroll-behavior:smooth}
    

    사업부 향해 지적 된 링크가 원활하게 그 부분에 이상 미끄러지 듯합니다 그 후.

    <a href="#section">Section1</a>
    

    편집 : 태그 위의에 대해 혼동 겁니다. 기본적으로는 클릭 할 수있는 링크입니다. 당신은 다음과 같은 웹 페이지의 다른 div 태그의 어딘가를 가질 수 있습니다

    <div classname="section">content</div>
    

    이 점에서 링크가 클릭 할 것이며, 우리는 부분이라고 무엇이든 #section,이 경우에는 그것의 우리의 사업부로 이동합니다.

    BTW, 나는 일이를 얻을려고 시간을 보냈다. 일부 모호한 코멘트 섹션에서 솔루션을 찾을. 그것은 버그이었고, 일부 태그 작동하지 않을 것입니다. 본문에 작동하지 않았다. 나는 CSS 파일에서 HTML {}에 넣어 때 마지막으로 일했다.


  4. 4.

    $('a[href*=#]').click(function(event){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        event.preventDefault();
    });
    

    이 나를 위해 완벽했다


  5. 5.만 CSS

    만 CSS

    html {
        scroll-behavior: smooth !important;
    }
    

    모든 당신은이를 추가해야합니다. 이제 내부 링크 스크롤 동작은 스트림 흐름처럼 원활하게 될 것입니다.

    참고 : 모든 최신 브라우저 (오페라, 크롬, 파이어 폭스 등)이 기능을 지원합니다.

    상세 이해를 위해,이 기사를 읽고


  6. 6.나는 아무도도 일치하도록 브라우저 위치 해시를 업데이트하는 돌봐 기본 솔루션을 게시하지 않았다 놀라게하고있다. 여기있어:

    나는 아무도도 일치하도록 브라우저 위치 해시를 업데이트하는 돌봐 기본 솔루션을 게시하지 않았다 놀라게하고있다. 여기있어:

    let anchorlinks = document.querySelectorAll('a[href^="#"]')
     
    for (let item of anchorlinks) { // relitere 
        item.addEventListener('click', (e)=> {
            let hashval = item.getAttribute('href')
            let target = document.querySelector(hashval)
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            })
            history.pushState(null, null, hashval)
            e.preventDefault()
        })
    }
    

    튜토리얼 참조 : http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

    끈적 끈적한 헤더 사이트의 경우, 스크롤 패딩 탑 CSS는 오프셋을 제공 할 수 있습니다.


  7. 7.난 당신이 일반적인 코드를 확인하는 것이 좋습니다 :

    난 당신이 일반적인 코드를 확인하는 것이 좋습니다 :

    $('a[href^="#"]').click(function(){
    
    var the_id = $(this).attr("href");
    
        $('html, body').animate({
            scrollTop:$(the_id).offset().top
        }, 'slow');
    
    return false;});
    

    당신은 여기에 아주 좋은 기사를 볼 수 있습니다 JQuery와 - effet은 부드러운 스크롤 - 부정 - fluide


  8. 8.

    $(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;
          }
        }
      });
    });
    

    공무원: http://css-tricks.com/snippets/jquery/smooth-scrolling/


  9. 9.그러나 그들은 모두 비어있는 앵커는 제외해야한다는 사실을 누락 - 좋은 답변을 많은 이미 여기에있다. 그렇지 않으면 그 스크립트는 즉시 빈 앵커 클릭으로 자바 스크립트 오류를 ​​생성합니다.

    그러나 그들은 모두 비어있는 앵커는 제외해야한다는 사실을 누락 - 좋은 답변을 많은 이미 여기에있다. 그렇지 않으면 그 스크립트는 즉시 빈 앵커 클릭으로 자바 스크립트 오류를 ​​생성합니다.

    제 생각에는 정답이 같다 :

    $('a[href*=\\#]:not([href$=\\#])').click(function() {
        event.preventDefault();
    
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
    });
    

  10. 10.jQuery를 사용하여 :

    jQuery를 사용하여 :

    $('a[href*=#]').click(function(){
      $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
      }, 500);
      return false;
    });
    

  11. 11.해시 ID 스크롤에 부드러운 스크롤을 기본적으로 지원이있다.

    해시 ID 스크롤에 부드러운 스크롤을 기본적으로 지원이있다.

    html {
      scroll-behavior: smooth;
    }
    

    https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2 : 당신은 좀 걸릴 수 있습니다


  12. 12.대답 주어진 작동하지만 비활성화 링크를 보내는. 추가 보너스 밖으로 쉽게 (스윙) 및 측면 나가는 링크가있는 버전 아래.

    대답 주어진 작동하지만 비활성화 링크를 보내는. 추가 보너스 밖으로 쉽게 (스윙) 및 측면 나가는 링크가있는 버전 아래.

    $(document).ready(function () {
        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
    
            var target = this.hash;
            var $target = $(target);
    
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        });
    });
    

  13. 13.HTML

    HTML

    <a href="#target" class="smooth-scroll">
        Link
    </a>
    <div id="target"></div>
    

    또는 절대 전체 URL로

    <a href="https://somewebsite.com/#target" class="smooth-scroll">
        Link
    </a>
    <div id="target"></div>
    

    jQuery를

    $j(function() {
        $j('a.smooth-scroll').click(function() {
            if (
                    window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                &&  window.location.hostname == this.hostname
            ) {
                var target = $j(this.hash);
                target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $j('html,body').animate({
                        scrollTop: target.offset().top - 70
                    }, 1000);
                    return false;
                }
            }
        });
    });
    

  14. 14.현대 브라우저는 조금 더 빠른 요즘입니다. setInterval을 작동 할 수도 있습니다. 물론 크롬과 파이어 폭스 요즘에이 기능을 작동합니다. (A 조금 천천히 사파리에서, IE 신경 쓰지 않았다)

    현대 브라우저는 조금 더 빠른 요즘입니다. setInterval을 작동 할 수도 있습니다. 물론 크롬과 파이어 폭스 요즘에이 기능을 작동합니다. (A 조금 천천히 사파리에서, IE 신경 쓰지 않았다)

    function smoothScroll(event) {
        if (event.target.hash !== '') { //Check if tag is an anchor
            event.preventDefault()
            const hash = event.target.hash.replace("#", "")
            const link = document.getElementsByName(hash) 
            //Find the where you want to scroll
            const position = link[0].getBoundingClientRect().y 
            let top = 0
    
            let smooth = setInterval(() => {
                let leftover = position - top
                if (top === position) {
                    clearInterval(smooth)
                }
    
                else if(position > top && leftover < 10) {
                    top += leftover
                    window.scrollTo(0, top)
                }
    
                else if(position > (top - 10)) {
                    top += 10
                    window.scrollTo(0, top)
                }
    
            }, 6)//6 milliseconds is the faster chrome runs setInterval
        }
    }
    

  15. 15.이 사용하는 스크롤 동작을 수행하는 CSS의 방법이있다. 다음과 같은 속성을 추가합니다.

    이 사용하는 스크롤 동작을 수행하는 CSS의 방법이있다. 다음과 같은 속성을 추가합니다.

        scroll-behavior: smooth;
    

    그리고 그것입니다. 아니 JS이 필요합니다.

    ㅏ { 표시 : 인라인 블록; 폭 : 50 픽셀; 텍스트 장식 : 없음; } NAV 스크롤 컨테이너 { 표시 : 블록; 여백 : 0 자동; 텍스트 정렬 : 센터; } 탐색 { 폭 : 339px; 패딩 : 5px; 국경 : 1 픽셀의 검은 색; } 스크롤 컨테이너 { 표시 : 블록; 폭 : 350px; 높이 : 200 픽셀; 오버플 Y : 스크롤; 스크롤 동작 : 부드러운; } 스크롤 페이지 { 표시 : 플렉스; 정렬-항목 : 센터; 정당화 - 내용 : 센터; 신장 : 100 %; 폰트 크기 : 5em; } <탐색> 1 2 3 <스크롤 용기> <스크롤 페이지 ID = "1 페이지"> 1 <스크롤 페이지 ID = "페이지 2"> 2 <스크롤 페이지 ID = "3 페이지"> 3

    PS : 브라우저 호환성을 확인하시기 바랍니다.


  16. 16.이 추가 :

    이 추가 :

    function () {
        window.location.hash = href;
    }
    

    어떻게 든 수직 오프셋을 무효로한다

    top - 72
    

    유타하지 크롬에서 파이어 폭스와 IE,있다. 기본적으로,이에 따라 중지해야하는 시점에 부드럽게 페이지 스크롤 오프셋,하지만 페이지가 오프셋없이 갈 것 곳으로 아래로 이동합니다.

    이 URL의 끝에 해시를 추가 않지만, 돌아 가기을지지 않습니다 다시 누르면, 그냥 url 및 잎이 앉아보기 창에서 해시를 제거합니다.

    여기에 내가 사용하고있는 전체 JS입니다 :

    var $root = $('html, body');
    $('a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top - 120
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
    

  17. 17.이 솔루션은 다른 페이지에 앵커 링크를 깨지 않고, 다음과 같은 URL에 대한 작동합니다.

    이 솔루션은 다른 페이지에 앵커 링크를 깨지 않고, 다음과 같은 URL에 대한 작동합니다.

    http://www.example.com/dir/index.html
    http://www.example.com/dir/index.html#anchor
    
    ./index.html
    ./index.html#anchor
    

    기타

    var $root = $('html, body');
    $('a').on('click', function(event){
        var hash = this.hash;
        // Is the anchor on the same page?
        if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
            $root.animate({
                scrollTop: $(hash).offset().top
            }, 'normal', function() {
                location.hash = hash;
            });
            return false;
        }
    });
    

    아직, 모든 브라우저에서이 테스트를하지 않았습니다.


  18. 18.이것은 쉽게 jQuery를이 대상 해시를 식별하고 언제 어디서 중지하려면 알 수 있도록 할 것입니다.

    이것은 쉽게 jQuery를이 대상 해시를 식별하고 언제 어디서 중지하려면 알 수 있도록 할 것입니다.

    $('a[href*="#"]').click(function(e) {
        e.preventDefault();
        var target = this.hash;
        $target = $(target);
    
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
    

  19. 19.

    $("a").on("click", function(event){
        //check the value of this.hash
        if(this.hash !== ""){
            event.preventDefault();
    
            $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);
    
            //add hash to the current scroll position
            window.location.hash = this.hash;
    
        }
    
    
    
    });
    

  20. 20.테스트 및 검증 코드

    테스트 및 검증 코드

    <script>
    jQuery(document).ready(function(){
    // Add smooth scrolling to all links
    jQuery("a").on('click', function(event) {
    
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
    
      // Store hash
      var hash = this.hash;
    
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      jQuery('html, body').animate({
        scrollTop: jQuery(hash).offset().top
      }, 800, function(){
    
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
    });
    });
    </script>
    

  21. 21.둘 다 "/ xxxxx는 # asdf을"과 "#asdf"HREF 앵커에 대한 이런 짓을

    둘 다 "/ xxxxx는 # asdf을"과 "#asdf"HREF 앵커에 대한 이런 짓을

    $("a[href*=#]").on('click', function(event){
        var href = $(this).attr("href");
        if ( /(#.*)/.test(href) ){
          var hash = href.match(/(#.*)/)[0];
          var path = href.match(/([^#]*)/)[0];
    
          if (window.location.pathname == path || path.length == 0){
            event.preventDefault();
            $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
            window.location.hash = hash;
          }
        }
    });
    

  22. 22.여기에 부드러운 스크롤에 대한 여러 링크와 앵커에 대한 구현 된 솔루션입니다 :

    여기에 부드러운 스크롤에 대한 여러 링크와 앵커에 대한 구현 된 솔루션입니다 :

    http://www.adriantomic.se/development/jquery-localscroll-tutorial/ 당신이 경우 탐색 링크는 탐색 DIV에 설정하고이 구조 선언 :

    <a href = "#destinationA">
    

    당신은 너무 앵커 태그 대상을 해당 :

    <a id = "destinationA">
    

    그럼 그냥 문서의 머리에이로드 :

        <!-- Load jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    
    <!-- Load ScrollTo -->
    <script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
    
    <!-- Load LocalScroll -->
    <script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
    
    <script type = "text/javascript">
     $(document).ready(function()
        {
            // Scroll the whole document
            $('#menuBox').localScroll({
               target:'#content'
            });
        });
    </script>
    

    @Adriantomic 덕분에


  23. 23.당신이 사업부 아래로 스크롤 페이지에 간단한 버튼이, 위에서 뛰어 작업에 뒤로 버튼을 원한다면, 그냥이 코드를 추가합니다 :

    당신이 사업부 아래로 스크롤 페이지에 간단한 버튼이, 위에서 뛰어 작업에 뒤로 버튼을 원한다면, 그냥이 코드를 추가합니다 :

    $(window).on('hashchange', function(event) {
        if (event.target.location.hash=="") {
            window.scrollTo(0,0);
        }
    });
    

    이것은 해시 값을 읽기, 조셉 Silbers 대답처럼 스크롤, 너무 다른 div에로 이동하도록 확장 할 수있다.


  24. 24.오프셋 () 함수는 문서에 요소의 위치를주는 것을 잊지 마십시오. 당신이 부모 당신이 사용해야 당신의 요소 상대를 스크롤 할 필요가 그래서;

    오프셋 () 함수는 문서에 요소의 위치를주는 것을 잊지 마십시오. 당신이 부모 당신이 사용해야 당신의 요소 상대를 스크롤 할 필요가 그래서;

        $('.a-parent-div').find('a').click(function(event){
            event.preventDefault();
            $('.scroll-div').animate({
         scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
         }, 500);       
      });
    

    핵심은 스크롤 사업부의 scrollTop을 받고 scrollTop에 추가됩니다. 당신이 그 위치 () 함수를하지 않을 경우 항상 서로 다른 위치 값을 제공합니다.


  25. 25.당신은 행동 window.scroll ()를 사용할 수 있습니다 부드럽고 앵커 태그는 뷰포트의 상단에있을 것입니다 보장 앵커 태그의 오프셋 가기 상단 세트.

    당신은 행동 window.scroll ()를 사용할 수 있습니다 부드럽고 앵커 태그는 뷰포트의 상단에있을 것입니다 보장 앵커 태그의 오프셋 가기 상단 세트.

    document.querySelectorAll('a[href^="#"]').forEach(a => {
        a.addEventListener('click', function (e) {
            e.preventDefault();
            var href = this.getAttribute("href");
            var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
            //gets Element with an id of the link's href 
            //or an anchor tag with a name attribute of the href of the link without the #
            window.scroll({
                top: elem.offsetTop, 
                left: 0, 
                behavior: 'smooth' 
            });
            //if you want to add the hash to window.location.hash
            //you will need to use setTimeout to prevent losing the smooth scrolling behavior
           //the following code will work for that purpose
           /*setTimeout(function(){
                window.location.hash = this.hash;
            }, 2000); */
        });
    });
    

    데모:

    A, A : 방문 { 파란색; } 부분 { 여백 - 상단 : 500 픽셀 0 픽셀; 텍스트 정렬 : 오른쪽; } 제 1 절
    2 절
    3 절
    제 4 <섹션 ID = "횡단면 1"> 제 1

    로렘 입숨 당근, 나는 일반 법원, 축구 neglegentur 두 가지 모두에 의해 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다.

    <섹션> <섹션 ID = "2 장"> 제 2

    로렘 입숨 당근, 나는 일반 법원, 축구 neglegentur 두 가지 모두에 의해 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다. <섹션> <섹션 ID = "섹션 3"> 제 3

    LOREM의 ipsum의 당근, 나는 모두 정규 코트, 축구 neglegentur 2로 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다. <섹션> <스타일 = "여백 : 500 픽셀 0; 색상 : 초기;" 이름 = "은 Section"> 제 4 <난> (이 앵커 태그 아닌 부분이다)

    LOREM의 ipsum의 당근, 나는 모두 정규 코트, 축구 neglegentur 2로 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다. <스크립트> document.querySelectorAll ( 'A [^ HREF = ""). 대해 forEach (a => { a.addEventListener ({), 기능 (예 '를 클릭' e.preventDefault (); var에 BR this.getAttribute ( "HREF"); VAR ELEM = document.querySelector (HREF) || document.querySelector ( "[이름 ="+ href.substring (1 href.length) + "]"); window.scroll ({ 상단 elem.offsetTop; 왼쪽 : 0; 행동 : '부드럽게' }); }); });

    당신은 단지 CSS 속성 스크롤 동작이 자바 스크립트에 대한 필요성을 제거하는 (되는 대부분의 최신 브라우저 지원) 부드럽게 설정할 수 있습니다.

    HTML, 신체 { 스크롤 동작, 부드러운; } A, A : 방문 { 파란색; } 부분 { 여백 - 상단 : 500 픽셀 0 픽셀; 텍스트 정렬 : 오른쪽; } 제 1 절
    2 절
    3 절
    제 4 <섹션 ID = "횡단면 1"> 제 1

    로렘 입숨 당근, 나는 일반 법원, 축구 neglegentur 두 가지 모두에 의해 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다.

    <섹션> <섹션 ID = "2 장"> 제 2

    로렘 입숨 당근, 나는 일반 법원, 축구 neglegentur 두 가지 모두에 의해 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다. <섹션> <섹션 ID = "섹션 3"> 제 3

    LOREM의 ipsum의 당근, 나는 모두 정규 코트, 축구 neglegentur 2로 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다. <섹션> <스타일 = "여백 : 500 픽셀 0; 색상 : 초기;" 이름 = "은 Section"> 제 4 <난> (이 앵커 태그 아닌 부분이다)

    LOREM의 ipsum의 당근, 나는 모두 정규 코트, 축구 neglegentur 2로 칭찬하고 싶다. 당신을 쫓는 사람 배우고, 자신의 축구 철학을 지불해야합니다. 당신이 그에게 동의하지 않는 경우에, 그에게, 나에 signiferumque의 사람들에게 미움을. 영원한 조례는 않으며 축구의를 생각 될 수있다. 살에는 꾸밈이 없다. 객체를 사용하여 자신의 보조 그리스에서 여전히 힘에 Nonumes이 있습니다. 하나 그들과 함께이 오류. 진실은, 밖으로의 장소를 변경합니다. 모든 가치의 오차이며, 이는 선택 될했다 LOREM한다. 그는 종류의 아무것도 너무 큰 수없는 말을하지 않습니다, 그들 중 하나를하지 보았다. 우리는 효과적인 축구의 조상이다. 그리고 그들은 signiferumque을 투자해야합니다. 특히 축구 electram합니다. Menandri 공격은 내가 이야기를 참을 수, 바로 당신을 느낀다. 내 존재하는 갈등의 뒷마당에서, 손상 여부를해야합니다. 그러나 그는이의 용서를 수신 시도됩니다. Homero 아니, 그러나, 완료 춤, 그 중, 쉽게 그들에게. 우리는 어디에서 음식이 존재했다. 또는, 나는 그들이이 사람들을 향해 일반적으로 사막화 메난드로스의, 현재에 두렵다. 작업으로 꽤 tempor의 labore 있습니다. 이 영사의 요구에 먼저 그것을 축구 있지만,가 lorem iriure를 facilisi 수 있습니다. 일반 epicuri 그것은 것이다. 당신은 내가 거짓말을한다고 생각 하시겠습니까없고, 그리스어, 재치 미리보기 공연, 그는 실족하지 아니하며에 입력했습니다. 그러나 숙제 나 여가 생활. Velit, 거룩한, 꿀, 아니 feugiat이없는 내 자신의 것들로, 꿀과 함께,하지 선택할 수의 단맛을한다. 개발자를 위해 만들어진 받았다. 아니면이 내 주인에게 그런 일을 만든 것을 잘 알고, 새로운 mucius 텔레비전 수 있으며, mazim 풍만 땅을했다 : 레이어에 대해. 우리는 바다로 포세 이도 니오스 테오을주고, 얼굴 중의 hendrerit 장소의 사람들에, 내가 그녀를 공개하고 싶지 않아, 거짓말을 할 수 있습니다. 폭력에서 음주 운전 feugiat, 그리고 박해 그분을 도밍 축구 승인하지 않습니다. 야외 Zril를 들어 일이 편의입니다. 공시 연습을 누그러 것이다. 축구가 아니라 그냥들을 수 있습니다.


  26. 26.공유를위한 감사, 조셉 실버. 여기에 약간의 변화와 ES6 같은 2018 솔루션은 표준 동작 (위로 스크롤) 유지 :

    공유를위한 감사, 조셉 실버. 여기에 약간의 변화와 ES6 같은 2018 솔루션은 표준 동작 (위로 스크롤) 유지 :

    document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
      anchor.addEventListener("click", function (ev) {
        ev.preventDefault();
    
        const targetElement = document.querySelector(this.getAttribute("href"));
        targetElement.scrollIntoView({
          block: "start",
          alignToTop: true,
          behavior: "smooth"
        });
      });
    });
    

  27. 27.브라우저 URL에 해시를 추가하는 동안, 대신 ID의 지정된 이름을 가진 앵커 태그에 JQuery와 및 애니메이션이 필요합니다. 또한 # 기호가 탈출 백 슬래시로 시작되지 jQuery로 대부분의 답변에 오류를 해결합니다. 백 버튼, 불행하게도, 이전 해시 링크를 다시 제대로 이동하지 않습니다 ...

    브라우저 URL에 해시를 추가하는 동안, 대신 ID의 지정된 이름을 가진 앵커 태그에 JQuery와 및 애니메이션이 필요합니다. 또한 # 기호가 탈출 백 슬래시로 시작되지 jQuery로 대부분의 답변에 오류를 해결합니다. 백 버튼, 불행하게도, 이전 해시 링크를 다시 제대로 이동하지 않습니다 ...

    $('a[href*=\\#]').click(function (event)
    {
        let hashValue = $(this).attr('href');
        let name = hashValue.substring(1);
        let target = $('[name="' + name + '"]');
        $('html, body').animate({ scrollTop: target.offset().top }, 500);
        event.preventDefault();
        history.pushState(null, null, hashValue);
    });
    

  28. 28.음,이 솔루션은 문제의 유형에 따라, 나는 버튼 클릭에 대한 자바 스크립트 애니메이션의 방법을 사용합니다. 나는 네비게이션 바에 대한 노호 링크에서 코드를 사용

    음,이 솔루션은 문제의 유형에 따라, 나는 버튼 클릭에 대한 자바 스크립트 애니메이션의 방법을 사용합니다. 나는 네비게이션 바에 대한 노호 링크에서 코드를 사용

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

    $(document).ready(function () {
      $(".js--scroll-to-plans").click(function () {
        $("body,html").animate(
          {
            scrollTop: $(".js--section-plans").offset().top,
          },
          1000
        );
        return false;
      });
    
      $(".js--scroll-to-start").click(function () {
        $("body,html").animate(
          {
            scrollTop: $(".js--section-features").offset().top,
          },
          1000
        );
        return false;
      });
    
      $('a[href*="#"]')
      // Remove links that don't actually link to anything
      .not('[href="#"]')
      .not('[href="#0"]')
      .click(function(event) {
        // On-page links
        if (
          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
          && 
          location.hostname == this.hostname
        ) {
          // Figure out element to scroll to
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          // Does a scroll target exist?
          if (target.length) {
            // Only prevent default if animation is actually gonna happen
            event.preventDefault();
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000, function() {
              // Callback after animation
              // Must change focus!
              var $target = $(target);
              $target.focus();
              if ($target.is(":focus")) { // Checking if the target was focused
                return false;
              } else {
                $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                $target.focus(); // Set focus again
              };
            });
          }
        }
      });
    });
    

  29. 29.누군가를 위해 2020 년 이후이 글을 읽고 누가 :

    누군가를 위해 2020 년 이후이 글을 읽고 누가 :

    나는 최근에 관심있는 사람들을위한 API를 부드러운 스크롤 크로스 브라우저를 발표했습니다.

    그것은 특정 X, Y 또는 일정량 부드럽게 스크롤 지원한다.

    이 페이지 (창, 문서, 사용자 정의 DIV, ECC ...)에있는 모든 요소에 대해 작동하고 모든 스크롤은 언제든지 취소 할 수 있습니다!

    나는 또한 scrollIntoView 기능 (이것은 내가 무슨 말입니다) 및 앵커 링크 목적지까지 자동으로 부드럽게 - 스크롤이 (uss.hrefSetup라고)하는 일을 구현했습니다.

    당신이 그것에 대해 또는 경우 자세한 내용을 알고 싶은 경우에 당신은 궁금 : GitHub의 REPO를.

  30. from https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link by cc-by-sa and MIT license