Bootstrap의 스크롤 스파이 기능에 부드러운 스크롤을 추가하는 방법

Bootstrap의 스크롤 스파이 기능에 부드러운 스크롤을 추가하는 방법

---

나는 잠시 동안 내 사이트에 부드러운 스크롤 기능을 추가하려고 노력했지만 작동하지 않는 것 같습니다.

내 탐색과 관련된 내 HTML 코드는 다음과 같습니다.

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

추가 한 JS 코드는 다음과 같습니다.

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

<script>
    $(document).ready(function(e) {

        $('#nav').scrollSpy()
        $('#nav ul li a').bind('click', function(e) {
            e.preventDefault();
            target = this.hash;
            console.log(target);
            $.scrollTo(target, 1000);
        });
    });
</script>

무엇의 가치를 들어, 여기에 내가 지금까지 무슨 짓을했는지에 대한 정보를받은 곳이며, 여기에 그것의 현재 형태로 내 사이트입니다. 도와 주시면 파이나 쿠키 같은 걸 구울 게요. 감사!

---

그 플러그인이 정말로 필요합니까? scrollTop속성에 애니메이션을 적용 할 수 있습니다 .

$("#nav ul li a[href^='#']").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

깡깡이

---

고정 된 navbar가있는 경우 이와 같은 것이 필요합니다.

위의 답변과 의견을 최대한 활용하여 ...

$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('#navbar').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

먼저 "정의되지 않은"오류를 방지하려면을 target호출하기 전에 해시를 변수에 preventDefault()저장하고 나중에 pupadupa에서 언급 한대로 저장된 값을 대신 참조합니다.

다음. window.location.hash = targetURL과 위치를 따로 설정하지 않고 동시에 설정하므로 사용할 수 없습니다 . ID가 href와 일치하는 요소의 시작 부분에 위치가 있지만 고정 상단 탐색 모음으로 덮여 있습니다.

이 문제를 해결하기 위해 scrollTop 값을 대상의 수직 스크롤 위치 값에서 고정 탐색 모음의 높이를 뺀 값으로 설정합니다. 해당 값을 직접 타겟팅하면 나중에 조정을 추가하고 전문가답지 않은 지터가 발생하는 대신 부드러운 스크롤이 유지됩니다.

URL은 변경되지 않습니다. 이를 설정하려면 return window.history.pushState(null, null, target);대신 사용 하여 히스토리 스택에 URL을 수동으로 추가하십시오.

끝난!

기타 참고 사항 :

1) 사용 .on방법은보다 더 2015년 1월) JQuery와 방법으로 (최신입니다 .bind나 .live, 심지어 .click내가 알아 당신에게 떠날거야 이유.

2) navOffset 값은 함수 내부 또는 외부에있을 수 있지만 다른 함수 / DOM 조작을 위해 해당 수직 공간을 참조 할 수 있으므로 외부를 원할 것입니다. 그러나 나는 그것을 하나의 기능으로 깔끔하게 만들기 위해 안에 두었습니다.

---

$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});

---

jquery easing 플러그인을 다운로드하면 (확인해 보세요 ) 다음을 main.js 파일에 추가하기 만하면됩니다.

$('a.smooth-scroll').on('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top + 20
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});

또한 다음과 같이 a 태그에 smooth-scroll 클래스를 추가하는 것을 잊지 마십시오.

 <li><a href="#about" class="smooth-scroll">About Us</a></li>

---

I combined it, and this is the results -

$(document).ready(function() {
     $("#toTop").hide();

            // fade in & out
       $(window).scroll(function () {
                    if ($(this).scrollTop() > 400) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                    }
                });     
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 400);
           return false;
         });
      }
    }
  });
});

I tested it and it works fine. hope this will help someone :)

---

What onetrickpony posted is okay, but if you want to have a more general solution, you can just use the code below.

Instead of selecting just the id of the anchor, you can make it bit more standard-like and just selecting the attribute name of the <a>-Tag. This will save you from writing an extra id tag. Just add the smoothscroll class to the navbar element.

What changed

1) $('#nav ul li a[href^="#"]') to $('#nav.smoothscroll ul li a[href^="#"]')

2) $(this.hash) to $('a[name="' + this.hash.replace('#', '') + '"]')

Final Code

/* Enable smooth scrolling on all links with anchors */
$('#nav.smoothscroll ul li a[href^="#"]').on('click', function(e) {

  // prevent default anchor click behavior
  e.preventDefault();

  // store hash
  var hash = this.hash;

  // animate
  $('html, body').animate({
    scrollTop: $('a[name="' + this.hash.replace('#', '') + '"]').offset().top
  }, 300, function(){

    // when done, add hash to url
    // (default click behaviour)
    window.location.hash = hash;

  });
});

---

// styles.css
html {
    scroll-behavior: smooth
}

Source: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

참고URL : https://stackoverflow.com/questions/14804941/how-to-add-smooth-scrolling-to-bootstraps-scroll-spy-function