it-swarm.com.de

So fügen Sie der Bootstrap-Scrollspy-Funktion nahtlosen Bildlauf hinzu

Ich habe seit einiger Zeit versucht, meiner Website eine reibungslose Bildlauffunktion hinzuzufügen, aber es scheint nicht, dass es funktioniert. 

Hier ist mein HTML-Code zu meiner Navigation:

<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-->

Hier ist der JS-Code, den ich hinzugefügt habe:

<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>

Für was es wert ist, hier erhielt ich Informationen darüber, was ich bisher gemacht habe, und hier ist meine Website in ihrer aktuellen Form. Wenn du mir helfen kannst, backe ich dir eine Torte oder Kekse oder so. Vielen Dank!

64
Brian

Benötigen Sie dieses Plugin wirklich? Sie können die scrollTop-Eigenschaft einfach animieren:

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

});

Geige

195
nice ass

Wenn Sie eine feste Navigationsleiste haben, brauchen Sie so etwas. 

Nehmen Sie die besten Antworten und Kommentare ...

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

Um den "undefinierten" Fehler zu vermeiden, speichern Sie den Hash in einer Variablen target, bevor Sie preventDefault() aufrufen, und referenzieren Sie stattdessen auf diesen gespeicherten Wert, wie von pupadupa erwähnt.

Nächster. Sie können window.location.hash = target nicht verwenden, da die URL und die Position gleichzeitig und nicht separat festgelegt werden. Am Ende des Elements befindet sich die Position am Ende des Elements, dessen ID mit dem Wert href ... übereinstimmt, jedoch von Ihrer festen oberen Navigationsleiste abgedeckt wird.

Um dies zu umgehen, setzen Sie Ihren scrollTop-Wert auf den vertikalen Bildlaufwert des Ziels minus der Höhe Ihrer festen Navigationsleiste. Durch direktes Anvisieren dieses Werts wird ein reibungsloser Bildlauf beibehalten, anstatt nachträglich eine Anpassung hinzuzufügen und unprofessionell wirkende Jitter zu erhalten.

Sie werden feststellen, dass sich die URL nicht ändert. Um dies festzulegen, verwenden Sie stattdessen return window.history.pushState(null, null, target);, um die URL manuell zum Protokollstapel hinzuzufügen.

Erledigt!

Weitere Hinweise: 

1) Die Verwendung der .on-Methode ist die neueste (ab Januar 2015) Jquery-Methode, die aus Gründen, die ich Ihnen überlasse, besser ist als .bind oder .live oder sogar .click.

2) Der navOffset-Wert kann sich innerhalb der Funktion oder außerhalb befinden, aber Sie werden ihn wahrscheinlich draußen haben wollen, da Sie diesen vertikalen Raum möglicherweise für andere Funktionen/DOM-Manipulationen verwenden. Aber ich habe es in mir gelassen, um daraus eine Funktion zu machen.

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

Wenn Sie das jquery easing plugin (check it out) herunterladen, müssen Sie dies nur Ihrer main.js-Datei hinzufügen:

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

und vergessen Sie nicht, die glatte Bildlaufklasse zu Ihren a-Tags hinzuzufügen: 

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

Ich habe es kombiniert, und das ist das Ergebnis - 

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

Ich habe es getestet und es funktioniert gut. hoffe das hilft jemandem :)

3
genisugt

Was onetrickpony gepostet wurde, ist in Ordnung, aber wenn Sie eine allgemeinere Lösung wünschen, können Sie einfach den folgenden Code verwenden.

Anstatt nur die Variable id des Ankers auszuwählen, können Sie ihn etwas standardisierter machen und einfach das Attribut name des <a>- Tags auswählen. Dies erspart Ihnen das Schreiben eines zusätzlichen id-Tags. Fügen Sie einfach die Smoothscroll-Klasse zum Navbar-Element hinzu.

Was hat sich geändert

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

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

Schlusscode

/* 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;

  });
});
0
Patrick H.
// styles.css
html {
    scroll-behavior: smooth
}

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

0
James Akwuh