¿Cómo desplazarse hacia arriba o hacia abajo de la página a un ancla usando jQuery?


176

Estoy buscando una forma de incluir un efecto de diapositiva para cuando haces clic en un enlace a un ancla local arriba o abajo de la página.

Me gustaría algo donde tengas un enlace como este:

<a href="#nameofdivetc">link text, img etc.</a>

quizás con una clase agregada para que sepa que desea que este enlace sea un enlace deslizante:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

Luego, si se hace clic en este enlace, la página se desliza hacia arriba o hacia abajo hasta el lugar requerido (podría ser un div, encabezado, parte superior de la página, etc.).


Esto es lo que tenía anteriormente:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Respuestas:


427

Descripción

Puedes hacer esto usando jQuery.offset()y jQuery.animate().

Echa un vistazo a la demostración jsFiddle .

Muestra

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Más información


52
Esto también se puede hacer genérico para trabajar con todos los enlaces de anclaje internos en la página:$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });
bardo

@bardo, ¿cómo se supone que debe implementarse? Reemplacé la solución de dkmaack con la suya, pero el deslizamiento no está allí (el ancla en sí es funcional). ¿Qué me estoy perdiendo?
jakub

1
@bardo también agrega, history.pushState(null, null, dest);ya que está evitando el cambio de hash de ubicación predeterminado
Mike Causer

77
Para su información, además de la solución de @ bardo, debe escapar del hash cuando use la última jQuery, $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…
jaegs

1
¿Cuál es el propósito de animar html AND body? Parece una situación en la que no sabemos lo que hacemos y simplemente lo hacemos todo. ¿Podría esto iniciar múltiples desplazamientos?
Ygoe

30

Suponiendo que su atributo href se vincula a un div con la identificación de la etiqueta con el mismo nombre (como de costumbre), puede usar este código:

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

1
Solución muy simple pero potente, que permite un control completo. Creo que esta respuesta debería obtener más votos a favor.
cronfy

De acuerdo, esta es la mejor solución y me ayudó mucho
probablemente el mejor

Funciona pero derrota el propósito de usar name. Cuando lo usa <a name="something"></a>, también puede hacer referencia a él desde afuera, sin embargo, su solución no lo proporciona.
Ramtin

8

Esto hizo mi vida mucho más fácil. Básicamente pones tu etiqueta de identificación de elementos y sus pergaminos sin mucho código

http://balupton.github.io/jquery-scrollto/

En Javascript

$('#scrollto1').ScrollTo();

En tu html

<div id="scroollto1">

Aquí estoy hasta abajo de la página


7
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

3
Pregunta genuina, ¿el + "" hace algo en la segunda línea?
Rob

@ Rob Javascript no tiene interpolación de cadenas, por lo que usar +con cuerdas o vars concatena ellos, como: "#some_anchor". Realmente, el segundo concat anchor_id + ""no es necesario, creo.
onebree

Gracias @onebree Era el segundo concat del que me preguntaba :)
Rob

5

También debe considerar que el objetivo tiene un relleno y, por lo tanto, usarlo en positionlugar de offset. También puede tener en cuenta una posible barra de navegación que no desea que se superponga con el objetivo.

const $navbar = $('.navbar');

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

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})

En mi humilde opinión, la mejor solución porque no necesita clases adicionales y matemáticas molestas de relleno en el CSS para barras de navegación fijas
KSPR

Pero esto no reescribe la etiqueta de anclaje en la url. Agregar history.pushState({}, "", this.href);para mantener actualizada la url
KSPR

3

Mi enfoque con jQuery para hacer que todos los enlaces de anclaje incrustados se deslicen en lugar de saltar al instante

Es realmente similar a la respuesta de Santi Núñez, pero es más confiable .

Apoyo

  • Entorno multi-marco.
  • Antes de que la página haya terminado de cargarse.
<a href="#myid">Go to</a>
<div id="myid"></div>
// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);


1

Es posible que desee agregar offsetTop y scrollTop valor en caso de que esté animando no toda la página, sino algo de contenido anidado.

p.ej :

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

0

Desplazamiento lento SS

Esta solución no requiere etiquetas de anclaje pero, por supuesto, debe hacer coincidir el botón de menú (atributo arbitrario, 'ss', por ejemplo) con la identificación del elemento de destino en su html.

ss="about" te lleva a id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});
.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

Violín

https://jsfiddle.net/Hastig/stcstmph/4/


0

Aquí está la solución que funcionó para mí. Esta es una función genérica que funciona para todas las aetiquetas que se refieren a un nombrea

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

Nota 1: asegúrese de utilizar comillas dobles "en su html. Si usa comillas simples, cambie la parte anterior del código avar target = $("a[name='" + name.substring(1) + "']");

Nota 2: en algunos casos, especialmente cuando usa la barra adhesiva de la rutina de carga, el nombre ase ocultará debajo de la barra de navegación. En esos casos (o cualquier otro caso similar), puede reducir el número de píxeles de su desplazamiento para lograr la ubicación óptima. Por ejemplo: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');lo llevará a los target15 píxeles restantes en la parte superior.


0

Me topé con este ejemplo en https://css-tricks.com/snippets/jquery/smooth-scrolling/ explicando cada línea de código. Encontré que esta es la mejor opción.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Puedes ser nativo:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

o con jquery:

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    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) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

0

Ok, el método más simple es: -

Dentro de la función de clic (Jquery): -

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

HTML

<div id="resultsdiv">Where I want to scroll to</div>

-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

Pruébalo aquí:

http://jsbin.com/ucati4


3
No incluya firmas, especialmente aquellas con enlaces ... y especialmente aquellas con enlaces no relacionados. Puedes poner ese tipo de cosas en tu perfil.
Andrew Barber

La pregunta que se hizo no fue cómo desplazarse a la parte superior de la página, sino cómo desplazarse a un ancla con un ID
usuario1380540

¿Hay alguna manera de usar eso en WordPress? Estoy agregando a mi sitio pero realmente no funciona. Aquí el enlace: scentology.burnnotice.co.za
agente de usuario

-1

La siguiente solución funcionó para mí:

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.