Come aggiungere lo scorrimento uniforme alla funzione di scorrimento di Bootstrap

Question

Ho cercato di aggiungere una funzione di scorrimento uniforme al mio sito per un po 'di tempo ma non riesco a farlo funzionare.

Ecco il mio codice HTML relativo alla mia navigazione:

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

ecco il codice JS ho aggiunto:

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

Per quel che vale, here è dove ho ricevuto informazioni quello che ho fatto finora e here è il mio sito nella sua forma attuale. Se puoi aiutarmi ti preparo una torta o biscotti o qualcosa del genere. Grazie!

Answer 1

Avete davvero bisogno di quel plugin? Si può solo animare la proprietà 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; 
    }); 

}); 

fiddle

Answer 2

Cosa onetrickpony postato va bene, ma se si vuole avere una soluzione più generale, si può semplicemente utilizzare il codice qui sotto.

Invece di selezionare solo la id dell'ancora, si può rendere po 'più standard-like e solo selezionando l'attributo name del <a> -Tag. Ciò ti eviterà di scrivere un tag extra id. Basta aggiungere la classe smoothscroll all'elemento barra di navigazione.

cosa è cambiato

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

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

codice finale

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

    }); 
}); 

Answer 3

Se si dispone di una barra di navigazione fissa, è' ll n eed qualcosa di simile.

Prendendo dalla migliore delle risposte e osservazioni di cui sopra ...

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

In primo luogo, al fine di evitare l'errore "indefinito", memorizzare l'hash ad una variabile, target, prima di chiamare preventDefault(), e in seguito si riferisce invece al valore memorizzato, come citato da pupadupa.

Avanti. Non è possibile utilizzare window.location.hash = target perché imposta l'url e la posizione contemporaneamente anziché separatamente. Finirai per avere la posizione all'inizio dell'elemento il cui id corrisponde a href ... ma coperto dalla tua barra di navigazione superiore fissa.

Per evitare questo, si imposta il valore scrollTop sul valore della posizione di scorrimento verticale del target meno l'altezza della barra di navigazione fissa. Il targeting diretto di tale valore mantiene lo scorrimento regolare, invece di aggiungere un aggiustamento in seguito e ottenere nervosismi non professionali.

Si noterà che l'URL non cambia.Per impostare questo, utilizzare invece return window.history.pushState(null, null, target); per aggiungere manualmente l'url allo stack cronologico.

Fatto!

Altre note:

1) utilizzando il metodo .on è l'ultima (a partire da gennaio 2015) metodo di jQuery che è meglio di .bind o .live, o anche .click per ragioni che lascerò a voi per scoprire .

2) il valore di navOffset può essere all'interno o all'esterno della funzione, ma probabilmente lo si vorrà all'esterno, poiché si può benissimo fare riferimento a quello spazio verticale per altre funzioni/manipolazioni DOM. Ma l'ho lasciato dentro per renderlo ordinatamente in una funzione.

Answer 4

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

Answer 5

ho combinato, e questo è il risultato -

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

ho provato e funziona benissimo. spero che questo aiuterà qualcuno :)

Answer 6

Se si scarica il jquery facilitando plug (check it out), allora non resta che aggiungere questo al file 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(); 
}); 

e anche non dimenticare di aggiungere il levigatezza classe di scorrimento per i tag a questo modo:

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