Effetto "scroll to/down" semplice utilizzando tag di hash e markup minimi

Question

Sto creando un sito di una pagina con una navigazione classica nella parte superiore. In questo momento ho i collegamenti creati come tag hash per navigare all'interno della pagina:

<nav> 
<a href="#about">About</a> 
</nav> 
... 
<section id="about">...</section> 

Ovviamente, questo funziona, ma il salto alla sezione Chi è immediata e non graduale. Sto cercando un'implementazione estremamente semplice per fare una transizione graduale. Non voglio niente di speciale. Nessun asse, offset o altre opzioni. Voglio solo che la transizione di scorrimento sia graduale. L'unica impostazione che voglio è il tempo necessario per completare la pergamena. Inoltre, non voglio apportare quasi nessuna modifica al mio markup. Ho visto diversi plugin javascript che richiedono l'utilizzo di tag di ancoraggio per impostare le posizioni nel documento html - non lo voglio. This site sembra promettente, ma non so come configurarlo. Non c'è demo quindi non vedo come installarlo. Non sono così alfabetizzato in Javascript. Inoltre, lo ScrollTo plugin per jQuery è troppo complicato. Sono disposto ad usare un plugin che ha molte opzioni, ma non voglio che le opzioni mi impediscano di capire come impostarlo.

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Questo è il modo migliore che ho trovato per farlo - solo utilizza gli ancoraggi normali, ma si estende la loro funzionalità

$('a').click(function() { 
    var elementClicked = $(this).attr("href"); 
    var destination = $(elementClicked).offset().top; 
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500); 
}); 

Ecco un live example

Answer 2

Ho usato il jQuery diretto per fare questo.

ho avuto un collegamento in questo modo ->

<a href="1" class="scrolling">Go to 1</a> 

quindi utilizzando jQuery sarebbe scorrere verso il basso ad un div con un altro ancora con id "1"

$("a.scrolling").click(function(e) { 
    e.preventDefault(); 
    goToByScroll($(this).attr("href")); 
}); 

function goToByScroll(id) { 
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');        
}      

Answer 3

C'è scrollTo in Javascript. È un evento di finestra. verificarlo qui: https://developer.mozilla.org/en/DOM/window.scrollTo

Answer 4

ho trovato questo codice su Internet durante la ricerca di un modo rapido per creare questo scorrimento per effetto.

codice html:

<a href="#services">Jump to services</a> 
<div id="services"></div> 

jQuery codice:

$(document).ready(function(){ 
$('a[href^="#"]').on('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; 
    }); 
}); 

});

Questo è il Code source.