Como rolar para cima ou para baixo na página até uma âncora usando o jQuery?

176

Estou procurando uma maneira de incluir um efeito de slide quando você clica em um link para uma âncora local, para cima ou para baixo na página.

Gostaria de algo em que você tenha um link assim:

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

talvez com uma classe adicionada para que você saiba que deseja que este link seja um link deslizante:

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

Então, se esse link for clicado, a página deslizará para cima ou para baixo até o local necessário (pode ser uma div, um cabeçalho, o topo da página etc.).


Isto é o que eu tinha 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');
    });
});
ade123
fonte

Respostas:

427

Descrição

Você pode fazer isso usando jQuery.offset()e jQuery.animate().

Confira a demonstração do jsFiddle .

Amostra

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

scrollToAnchor('id3');

Mais Informações

dknaack
fonte
52
Isso também pode ser feito genérico para trabalhar com todos os links de ancoragem internos na 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
@ardo, como é que deve ser implementado? Substituí a solução do dkmaack pela sua, mas o deslizamento não existe (a âncora em si é funcional). o que estou perdendo?
jakub
1
@bardo também adicionar history.pushState(null, null, dest);como você está impedindo a mudança de localização de hash padrão
Mike Causador
7
Além disso, além da solução do @ bardo, você deve escapar do hash ao usar o jQuery mais recente, $ ("a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…
jaegs
1
Qual é o objetivo de animar o html AND body? Parece uma situação em que não sabemos o que fazemos e apenas fazemos tudo. Isso pode dar início a várias pesquisas?
ygoe 10/0318
30

Supondo que seu atributo href esteja vinculado a uma div com o ID da tag com o mesmo nome (como de costume), você pode 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');
});
Santi Nunez
fonte
1
Solução muito simples, porém poderosa, que permite controle completo. Eu acho que essa resposta deve receber mais votos.
cronfy
Concordou, esta é a melhor solução e me ajudou muito
probablybest
Funciona, mas derrota o propósito de usar name. Quando você usa <a name="something"></a>, também pode fazer referência a partir de fora, mas sua solução não fornece isso.
Ramtin 6/10/10
8

Isso tornou minha vida muito mais fácil. Basicamente, você coloca sua tag de identificação dos elementos e seus pergaminhos sem muito código

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

Em Javascript

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

No seu html

<div id="scroollto1">

Aqui estou eu descendo a página

bobthenob
fonte
7
function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}
ipegasus
fonte
3
Pergunta genuína, o + "" faz alguma coisa na segunda linha?
21416 Rob
@ Rob javascript não tem interpolação de string, portanto, usando +com cordas ou vars concatena-los, como: "#some_anchor". Realmente, o segundo concat anchor_id + ""não é necessário, acredito.
Onebree 26/09/16
Graças @onebree Foi a segunda concat Eu estava pensando sobre :)
Rob
5

Você também deve considerar que o alvo possui um preenchimento e, portanto, usa em positionvez de offset. Você também pode contabilizar uma barra de navegação em potencial que não deseja sobrepor ao destino.

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

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

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

    $('html, body').animate({ scrollTop });
})
Matt
fonte
IMHO a melhor solução, porque ele não precisa classes adicionais e matemática preenchimento irritante no css para navbars fixos
KSPR
Mas isso não reescreve a marca âncora no URL. Adicione history.pushState({}, "", this.href);para manter o URL atualizado
KSPR 20/02/19
3

Minha abordagem com o jQuery para fazer com que todos os links âncora incorporados deslizem em vez de pular instantaneamente

É realmente semelhante à resposta de Santi Nunez, mas é mais confiável .

Apoio, suporte

  • Ambiente multi-framework.
  • Antes de a página terminar de carregar.
<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);
Timo Huovinen
fonte
1

Convém adicionar os valores offsetTop e scrollTop , caso você esteja animando não a página inteira, mas algum conteúdo aninhado.

por exemplo :

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);
TuxujPes
fonte
0

Rolagem lenta SS

Esta solução não requer tags de âncora, mas é claro que você precisa corresponder o botão de menu (atributo arbitrário, 'ss' no exemplo) com o ID do elemento de destino no seu html.

ss="about" leva você para 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>

Violino

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

Hastig Zusammenstellen
fonte
0

Aqui está a solução que funcionou para mim. Esta é uma função genérica que funciona para todas as atags referentes a um nomea

$("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: Certifique-se de usar aspas duplas "no seu html. Se você usar aspas simples, altere a parte do código acima paravar target = $("a[name='" + name.substring(1) + "']");

Nota 2: Em alguns casos, especialmente quando você usa a barra adesiva do bootstrap, o nome aserá oculto abaixo da barra de navegação. Nesses casos (ou em qualquer outro caso semelhante), você pode reduzir o número de pixels de sua rolagem para alcançar a localização ideal. Por exemplo: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');levará você ao target15 pixels restantes na parte superior.

Ramtin
fonte
0

Eu me deparei com este exemplo em https://css-tricks.com/snippets/jquery/smooth-scrolling/, explicando todas as linhas de código. Eu achei que essa era a melhor opção.

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

Você pode se tornar 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' 
});

ou com 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);
      }
    }
  });
Frankey
fonte
0

Ok, o método mais simples é: -

Dentro da função de clique (Jquery): -

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

HTML

<div id="resultsdiv">Where I want to scroll to</div>
Mikeys4u
fonte
-1
$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

Teste aqui:

http://jsbin.com/ucati4

Sabi Singh
fonte
3
Não inclua assinaturas, especialmente aquelas com links ... e especialmente aquelas com links não relacionados. Você pode colocar esse tipo de coisa no seu perfil.
Andrew Barber
A pergunta não era como se deslocar para o topo da página, era como rolar a uma âncora com um id
user1380540
Existe uma maneira de usá-lo no WordPress? Estou adicionando ao meu site, mas ele realmente não funciona. Aqui está o link: scentology.burnnotice.co.za
user agent
-1

A seguinte solução funcionou para mim:

$("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);
        }
    );
Behrouz.M
fonte