Efecto simple "desplazarse hacia abajo" usando marcas de marcado y hash mínimas

Question

Estoy haciendo un sitio de una página que tiene una navegación clásica en la parte superior. Ahora mismo tengo vínculos creados como etiquetas de hash para navegar dentro de la página:

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

Obviamente, esto funciona, pero el salto a la sección acerca es instantánea y no gradual. Estoy buscando una implementación extremadamente simple para hacer una transición gradual. No quiero nada lujoso. Sin eje, desplazamiento o cualquier otra opción. Solo quiero que la transición de desplazamiento sea gradual. La única configuración que quiero es el tiempo que toma terminar el desplazamiento. Además, quiero hacer casi ningún cambio en mi marcado. He visto varios plugins de JavaScript que requieren el uso de etiquetas de anclaje para establecer las ubicaciones en el documento html. No quiero eso. This site parece prometedor, pero no sé cómo configurarlo. No hay demo, así que no puedo ver cómo configurarlo. No soy tan alfabetizado en Javascript. Además, el ScrollTo plugin para jQuery es demasiado complicado. Estoy dispuesto a usar un complemento que tenga muchas opciones, pero simplemente no quiero que las opciones me impidan descubrir cómo configurarlo.

¡Cualquier ayuda sería muy apreciada!

Answer 1

Ésta es la mejor manera que he encontrado para hacerlo - sólo utiliza los anclajes normales sino que se extiende su funcionalidad

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

Aquí está una live example

Answer 2

He utilizado jquery para hacer esto.

que tenían un vínculo como tal ->

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

a continuación, utilizando jQuery sería desplazarse hacia abajo para un div con otro anclaje 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

Hay ScrollTo en Javascript. Es un evento de ventana. echa un vistazo aquí: https://developer.mozilla.org/en/DOM/window.scrollTo

Answer 4

He encontrado este código a través de Internet mientras busca una forma rápida de crear este desplazamiento para que tenga efecto.

código html:

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

jQuery código:

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

});

Este es el Code source.