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

desplazar la página hasta elemento html

Question

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

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

<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'');
    });
});

Answer 1

Desplazamiento lento SS

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

ss="about" 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/

Answer 2

Descripción

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

Mira 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

• Demostración jsFiddle
• jQuery.offset()
• jQuery.animate()

Answer 3

Es posible que desee agregar valores offsetTop y scrollTop en caso de que no esté animando toda la página, sino más bien 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);

Answer 4

Esto hizo mi vida mucho más fácil. Básicamente, pones tu etiqueta de identificación de elementos y se desplaza hacia ella sin un montón de código

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

En Javascript

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

En tu html

<div id="scroollto1">

Aquí estoy hasta el final de la página

Answer 5

Me quedé con mi código original y también incluí un fundido en el enlace ''back-to-top'' haciendo uso de este código y un poco de aquí también:

http://webdesignerwall.com/tutorials/animated-scroll-to-top

Funciona bien :)

Answer 6

Suponiendo que su atributo href esté enlazando a un div con la identificación de la etiqueta con el mismo nombre (como es habitual), 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'');
});

Answer 7

También debe considerar que el objetivo tiene un relleno y, por lo tanto, usar position lugar de offset . También puede representar una barra de navegación potencial que no desea superponer al 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 });
})

Answer 8

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

Answer 9

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

Pruébelo aquí:

http://jsbin.com/ucati4

Answer 10

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