javascript - scrolling - Desplazamiento suave al hacer clic en un enlace de anclaje

smooth scroll bootstrap

Question

Tengo un par de hipervínculos en mi página. Preguntas frecuentes que los usuarios leerán cuando visiten mi sección de ayuda.

Usando los enlaces de anclaje, puedo hacer que la página se desplace hacia el ancla y guiar a los usuarios allí.

¿Hay alguna manera de hacer ese desplazamiento suave?

Pero note que está usando una biblioteca de JavaScript personalizada. Tal vez jQuery ofrece cosas como esta al horno?

Answer 1

Añadiendo esto:

function () {
    window.location.hash = href;
}

de alguna manera está anulando el desplazamiento vertical

top - 72

en Firefox e IE, pero no en Chrome. Básicamente, la página se desplaza suavemente hasta el punto en el que debería detenerse en función del desplazamiento, pero luego salta hacia donde iría la página sin el desplazamiento.

Agrega el hash al final de la URL, pero al presionar Atrás no lo lleva a la parte superior, solo elimina el hash de la URL y deja la ventana de visualización donde se encuentra.

Aquí está el js completo que estoy usando:

var $root = $(''html, body'');
$(''a'').click(function() {
    var href = $.attr(this, ''href'');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Answer 2

Aquí está la solución que implementé para múltiples enlaces y anclajes, para un desplazamiento suave:

http://www.adriantomic.se/development/jquery-localscroll-tutorial/ si tiene sus enlaces de navegación configurados en un div de navegación y declarado con esta estructura:

<a href = "#destinationA">

y sus correspondientes destinos de etiqueta de anclaje como tal:

<a id = "destinationA">

Luego simplemente cargue esto en la cabecera del documento:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $(''#menuBox'').localScroll({
           target:''#content''
        });
    });
</script>

Gracias a @Adriantomic

Answer 3

Código probado y verificado

<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on(''click'', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery''s animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  jQuery(''html, body'').animate({
    scrollTop: jQuery(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if
});
});
</script>

Answer 4

El nuevo hotness en CSS3. Esto es mucho más fácil que todos los métodos listados en esta página y no requiere Javascript. Simplemente ingrese el código a continuación en css y, de repente, los enlaces que apuntan a ubicaciones dentro de su propia página tendrán una animación de desplazamiento suave.

html{scroll-behavior:smooth}

Después de eso, cualquier enlace apuntado hacia un div se deslizará suavemente sobre esas secciones.

<a href="#section">Section1</a>

Por cierto, pasé horas tratando de hacer que esto funcionara. Encontré la solución en alguna sección oscura de comentarios. Estaba buggy y no funcionaba en algunas etiquetas. No trabajaba en el cuerpo. Finalmente funcionó cuando lo puse en html {} en el archivo CSS.

Answer 5

Esta solución también funcionará para las siguientes URL, sin romper los enlaces de anclaje a diferentes páginas.

http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor

./index.html
./index.html#anchor

etc.

var $root = $(''html, body'');
$(''a'').on(''click'', function(event){
    var hash = this.hash;
    // Is the anchor on the same page?
    if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
        $root.animate({
            scrollTop: $(hash).offset().top
        }, ''normal'', function() {
            location.hash = hash;
        });
        return false;
    }
});

Todavía no he probado esto en todos los navegadores.

Answer 6

Esto facilitará que jQuery pueda discernir su hash objetivo y saber cuándo y dónde detenerse.

$(''a[href*="#"]'').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;
    });
});

Answer 7

Gracias por compartir, Joseph Silber. Aquí su solución 2018 como ES6 con un cambio menor para mantener el comportamiento estándar (desplácese hacia arriba):

document.querySelectorAll("a[href^=/"#/"]").forEach((anchor) => {
  anchor.addEventListener("click", function (ev) {
    ev.preventDefault();

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});

Answer 8

HTML

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

o Con URL completa absoluta

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

jQuery

$j(function() {
    $j(''a.smooth-scroll'').click(function() {
        if (
                window.location.pathname.replace(/^///, '''') == this.pathname.replace(/^///, '''')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j(''[name='' + this.hash.slice(1) + '']'');
            if (target.length) {
                $j(''html,body'').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});

Answer 9

Hay una forma css de hacer esto usando el comportamiento de desplazamiento. Agregue la siguiente propiedad.

    scroll-behavior: smooth;

Y eso es todo. No se requiere JS.

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>

PD: por favor verifica la compatibilidad del navegador.

Answer 10

Hice esto para los anclajes href "/ xxxxx # asdf" y "#asdf"

$("a[href*=#]").on(''click'', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $(''html,body'').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});

Answer 11

La respuesta dada funciona pero deshabilita los enlaces salientes. A continuación, una versión con una ventaja adicional adicional (swing) y respeta los enlaces salientes.

$(document).ready(function () {
    $(''a[href^="#"]'').on(''click'', function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $(''html, body'').stop().animate({
            ''scrollTop'': $target.offset().top
        }, 900, ''swing'', function () {
            window.location.hash = target;
        });
    });
});

Answer 12

La sintaxis correcta es:

//Smooth scrolling with links
$(''a[href*=//#]'').on(''click'', function(event){     
    event.preventDefault();
    $(''html,body'').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $(''html,body'').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

Simplificando : SECO

function smoothScrollingTo(target){
  $(''html,body'').animate({scrollTop:$(target).offset().‌​top}, 500);
}
$(''a[href*=//#]'').on(''click'', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

Explicación de href*=//# :

• * significa que coincide con lo que contiene # char. Por lo tanto solo coinciden las anclas Para más información sobre el significado de esto, vea here
• // es porque el # es un carácter especial en el selector css, así que tenemos que escapar de él.

Answer 13

Los navegadores modernos son un poco más rápidos en estos días. Un setInterval podría funcionar. Esta función funciona bien en Chrome y Firefox en estos días. (Un poco lento en safari, no se molestó con IE)

function smoothScroll(event) {
    if (event.target.hash !== '''') { //Check if tag is an anchor
        event.preventDefault()
        const hash = event.target.hash.replace("#", "")
        const link = document.getElementsByName(hash) 
        //Find the where you want to scroll
        const position = link[0].getBoundingClientRect().y 
        let top = 0

        let smooth = setInterval(() => {
            let leftover = position - top
            if (top === position) {
                clearInterval(smooth)
            }

            else if(position > top && leftover < 10) {
                top += leftover
                window.scrollTo(0, top)
            }

            else if(position > (top - 10)) {
                top += 10
                window.scrollTo(0, top)
            }

        }, 6)//6 milliseconds is the faster chrome runs setInterval
    }
}

Answer 14

Me sorprende que nadie haya publicado una solución nativa que también se encargue de actualizar el hash de ubicación del navegador para que coincida. Aquí está:

let anchorlinks = document.querySelectorAll(''a[href^="#"]'')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener(''click'', (e)=> {
        let hashval = item.getAttribute(''href'')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: ''smooth'',
            block: ''start''
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Consulte el tutorial: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

Answer 15

Nunca olvide que la función offset () le da a su elemento la posición para documentar. Así que cuando necesites desplazar tu elemento en relación con su padre, debes usar esto;

    $(''.a-parent-div'').find(''a'').click(function(event){
        event.preventDefault();
        $(''.scroll-div'').animate({
     scrollTop: $( $.attr(this, ''href'') ).position().top + $(''.scroll-div'').scrollTop()
     }, 500);       
  });

El punto clave es obtener scrollTop de scroll-div y agregarlo a scrollTop. Si no va a hacer esa posición (), la función siempre le da valores de posición diferentes.

Answer 16

Para los nuevos navegadores una solución CSS pura:

body {
    scroll-behavior: smooth;
}

Y una solución JS basada en la respuesta de coco puffs (no puedo publicar un comentario debido a la clasificación). (Tenga en cuenta que cambié el selector de consultas usado para encontrar el ancla por su atributo de nombre, me pregunto cómo funcionó para los puffs de coco).

let anchorlinks = document.querySelectorAll(''a[href^="#"]'');

for (let item of anchorlinks) {
    item.addEventListener(''click'', (e)=> {
        let hashval = item.getAttribute(''href'');
        let target = document.querySelector(''[name="''+hashval.substr(1)+''"]'');
        target.scrollIntoView({
            behavior: ''smooth'',
            block: ''start''
        });
        history.pushState(null, null, hashval);
        e.preventDefault();
    })
}

Answer 17

Puede usar window.scroll() con behavior: smooth y top establecido en la top de la etiqueta de anclaje, lo que garantiza que la etiqueta de ancla estará en la parte superior de la ventana gráfica.

document.querySelectorAll(''a[href^="#"]'').forEach(a => {
    a.addEventListener(''click'', function (e) {
        e.preventDefault();
        var href = this.getAttribute("href");
        var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
        //gets Element with an id of the link''s href 
        //or an anchor tag with a name attribute of the href of the link without the #
        window.scroll({
            top: elem.offsetTop, 
            left: 0, 
            behavior: ''smooth'' 
        });
        //if you want to add the hash to window.location.hash
        //you will need to use setTimeout to prevent losing the smooth scrolling behavior
       //the following code will work for that purpose
       /*setTimeout(function(){
            window.location.hash = this.hash;
        }, 2000); */
    });
});

Manifestación:

a, a:visited{
  color: blue;
}

section{
  margin: 500px 0px; 
  text-align: center;
}

<a href="#section1">Section 1</a>
<br/>
<a href="#section2">Section 2</a>
<br/>
<a href="#section3">Section 3</a>
<br/>
<a href="#section4">Section 4</a>
<section id="section1">
<b style="font-size: 2em;">Section 1</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.<p/>
<section>
<section id="section2">
<b style="font-size: 2em;">Section 2</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<section id="section3">
<b style="font-size: 2em;">Section 3</b>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<a style="margin: 500px 0px; color: initial;" name="section4">
<b style="font-size: 2em;">Section 4 <i>(this is an anchor tag, not a section)</i></b>
</a>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<script>
document.querySelectorAll(''a[href^="#"]'').forEach(a => {
        a.addEventListener(''click'', function (e) {
            e.preventDefault();
            var href = this.getAttribute("href");
            var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
            window.scroll({
                top: elem.offsetTop, 
                left: 0, 
                behavior: ''smooth'' 
            });
        });
    });
</script>

Simplemente puede establecer el scroll-behavior propiedad CSS en smooth (que es compatible con la mayoría de los navegadores modernos), lo que evita la necesidad de Javascript.

html, body{
  scroll-behavior: smooth;
}
a, a:visited{
  color: blue;
}

section{
  margin: 500px 0px; 
  text-align: center;
}

<a href="#section1">Section 1</a>
<br/>
<a href="#section2">Section 2</a>
<br/>
<a href="#section3">Section 3</a>
<br/>
<a href="#section4">Section 4</a>
<section id="section1">
<b style="font-size: 2em;">Section 1</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.<p/>
<section>
<section id="section2">
<b style="font-size: 2em;">Section 2</b>
<p>Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<section id="section3">
<b style="font-size: 2em;">Section 3</b>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>
<section>
<a style="margin: 500px 0px; color: initial;" name="section4">
<b style="font-size: 2em;">Section 4 <i>(this is an anchor tag, not a section)</i></b>
</a>
<p>
Lorem ipsum dolor sit amet, et vis laudem utroque, iusto forensibus neglegentur eu duo. Eu pro fuisset salutandi philosophia, discere persecuti qui te. Eos ad quodsi dissentias, ei odio viris signiferumque mei. Putent iuvaret perpetua nec eu. Has no ornatus vivendum. Adhuc nonumes ex vim, in suas rebum graecis mei, usu ad causae recusabo. Idque vituperata vel ea.

Veri verterem pro ex. Ad error omnes est, id sit lorem legendos. Eos vidit ullum ne, tale tantas omittam est ut. Nobis maiorum efficiendi eu mei. Eos et debet placerat signiferumque. Per eu propriae electram.

Impetus percipit menandri te ius, mea ne stet posse fabellas. Aliquid corrumpit vel no, mei in diam praesent contentiones. Qui veniam suscipit probatus ex. No autem homero perfecto quo, eos choro facilis ut. Te quo cibo interesset. Vel verear praesent in, menandri deserunt ad his.

Labore admodum consetetur has et. Possit facilisi eu sed, lorem iriure eum id, pri ei consul necessitatibus. Est te iusto epicuri. Vis no graece putent mentitum, rebum facete offendit nec in. In duis vivendo sed, vel id enim voluptatibus. Velit sanctus ne mel, quem sumo suavitate mel cu, mea ea nullam feugiat.

Tincidunt suscipiantur no pro. Vel ut novum mucius molestie, ut tale ipsum intellegebat mei, mazim accumsan voluptaria ea nam. Posidonium theophrastus ut sea, stet viris hendrerit pro ex, sonet mentitum ne quo. Vim duis feugiat ex, nec eu probo doming persecuti. Velit zril nam in, est commodo splendide id. Et aperiri fuisset iracundia usu. Eu nec iusto audire repudiare.</p>

Answer 18

Si tienes un botón simple en la página para desplazarte hacia abajo a un div y quieres que funcione el botón de retroceso saltando a la parte superior, solo agrega este código:

$(window).on(''hashchange'', function(event) {
    if (event.target.location.hash=="") {
        window.scrollTo(0,0);
    }
});

Esto también podría extenderse para saltar a diferentes divs, leyendo el valor de hash y desplazándose como responde Joseph Silbers.

Answer 19

Te sugiero que hagas este código genérico:

$(''a[href^="#"]'').click(function(){

var the_id = $(this).attr("href");

    $(''html, body'').animate({
        scrollTop:$(the_id).offset().top
    }, ''slow'');

return false;});

Puedes ver un muy buen artículo aquí: jquery-effet-smooth-scroll-defilement-fluide

Answer 20

Usando JQuery:

$(''a[href*=#]'').click(function(){
  $(''html, body'').animate({
    scrollTop: $( $.attr(this, ''href'') ).offset().top
  }, 500);
  return false;
});

Answer 21

Ya hay muchas respuestas buenas aquí, sin embargo, todas faltan en el hecho de que las anclas vacías deben ser excluidas . De lo contrario, esos scripts generan errores de JavaScript tan pronto como se hace clic en un ancla vacía.

En mi opinión, la respuesta correcta es así:

$(''a[href*=//#]:not([href$=//#])'').click(function() {
    event.preventDefault();

    $(''html, body'').animate({
        scrollTop: $($.attr(this, ''href'')).offset().top
    }, 500);
});

Answer 22

Actualización de abril de 2018: ahora hay una forma nativa de hacer esto :

document.querySelectorAll(''a[href^="#"]'').forEach(anchor => {
    anchor.addEventListener(''click'', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute(''href'')).scrollIntoView({
            behavior: ''smooth''
        });
    });
});

Actualmente, esto solo se admite en los navegadores más modernos.

Para la compatibilidad con navegadores antiguos, puede utilizar esta técnica jQuery:

$(document).on(''click'', ''a[href^="#"]'', function (event) {
    event.preventDefault();

    $(''html, body'').animate({
        scrollTop: $($.attr(this, ''href'')).offset().top
    }, 500);
});

Y aquí está el violín: http://jsfiddle.net/9SDLw/

Si su elemento de destino no tiene una ID, y está vinculado a él por su name , use esto:

$(''a[href^="#"]'').click(function () {
    $(''html, body'').animate({
        scrollTop: $(''[name="'' + $.attr(this, ''href'').substr(1) + ''"]'').offset().top
    }, 500);

    return false;
});

Para aumentar el rendimiento, debe almacenar en la memoria caché el selector $(''html, body'') , para que no se ejecute cada vez que se haga clic en un ancla:

var $root = $(''html, body'');

$(''a[href^="#"]'').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, ''href'') ).offset().top
    }, 500);

    return false;
});

Si desea que la URL se actualice, hágalo dentro de la devolución de llamada animate :

var $root = $(''html, body'');

$(''a[href^="#"]'').click(function() {
    var href = $.attr(this, ''href'');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

Answer 23

$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }



});

Answer 24

$(''a[href*=#]'').click(function(event){
    $(''html, body'').animate({
        scrollTop: $( $.attr(this, ''href'') ).offset().top
    }, 500);
    event.preventDefault();
});

esto funcionó perfecto para mí

Answer 25

$(function() {
  $(''a[href*=#]:not([href=#])'').click(function() {
    if (location.pathname.replace(/^///,'''') == this.pathname.replace(/^///,'''') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $(''[name='' + this.hash.slice(1) +'']'');
      if (target.length) {
        $(''html,body'').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Oficial: http://css-tricks.com/snippets/jquery/smooth-scrolling/