Como posso rolar para um local específico na página usando o jquery?

133

É possível rolar para um local específico na página usando o jQuery?

O local que eu quero rolar precisa ter:

<a name="#123">here</a>

Ou pode simplesmente mudar para um ID DOM específico?

mrblah
fonte
3
apenas uma pequena nota: o atributo "name" não é permitido em XHTML 1.1 Strict, use um ID em vez
Juraj Blahunka
pergunta interessante, não é possível usar as coordenadas da página para rolar? Eu acho que deveríamos ser capazes.
Omar Abid
Eu tenho solução semelhante à sua exigência em [aqui] [1] [1]: stackoverflow.com/questions/3432656/...
user1493023
@mrblah, seu problema foi resolvido?
Meghdad Hadidi 07/07

Respostas:

242

Plugin de rolagem jQuery

Como esta é uma pergunta marcada com jquery, devo dizer que esta biblioteca possui um plugin muito bom para rolagem suave, você pode encontrá-lo aqui: http://plugins.jquery.com/scrollTo/

Trechos da documentação:

$('div.pane').scrollTo(...);//all divs w/class pane

ou

$.scrollTo(...);//the plugin will take care of this

Função jQuery personalizada para rolagem

você pode usar uma abordagem muito leve, definindo sua função jquery de rolagem personalizada

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

e use-o como:

$('#your-div').scrollView();

Role até as coordenadas da página

Animar htmle bodyelementos com scrollTopou scrollLeftatributos

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

JavaScript simples

rolando com window.scroll

window.scroll(horizontalOffset, verticalOffset);

apenas para resumir, use o window.location.hash para pular para o elemento com o ID

window.location.hash = '#your-page-element';

Diretamente em HTML (aprimoramentos de acessibilidade)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>
Juraj Blahunka
fonte
Obrigado @Juraj Blahunka, mas faço isso sem nenhum plug
in #
O link não está me levando para ScrollTo . Você pode atualizá-lo, por favor?
Barna Tekse
Essa deve ser a resposta!
Neelmeg #
128

Sim, mesmo em JavaScript simples é muito fácil. Você atribui um ID a um elemento e pode usá-lo como um "marcador":

<div id="here">here</div>

Se você quiser rolar para lá quando um usuário clicar em um link, basta usar o método experimentado e verdadeiro:

<a href="#here">scroll to over there</a>

Para fazer isso programaticamente, use scrollIntoView()

document.getElementById("here").scrollIntoView()
nickf
fonte
@nickf Isso ainda não é suportado em todos os lugares. caniuse.com/#search=scrollIntoView
Aditya Singh
Este suporte é suportado ( developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView ). Pense que você não leu o canal corretamente. No entanto, não será animado. Um salto bastante abrupto que nem sempre é bom.
perry
53

Não há necessidade de usar nenhum plugin, você pode fazer assim:

var divPosition = $('#divId').offset();

use-o para rolar o documento para o DOM específico:

$('html, body').animate({scrollTop: divPosition.top}, "slow");
Meghdad Hadidi
fonte
3
+1 Esta é provavelmente a melhor resposta. Não há muito código e não requer um plug-in.
Tricky12
1
Observe que pode ser necessário recalcular o deslocamento no redimensionamento da janela.
Bart Burg
2
@BartBurg good point-- ou apenas recalcular logo antes que a .animatechamada aconteça #
mikermcneil
5
Ame a resposta simples. Por que as pessoas têm que tornar as coisas tão complicadas? Não quero outro plugin.
sterfry68
1
Na verdade, a melhor resposta.
Robert Ross
21

Aqui está uma versão javascript pura:

location.hash = '#123';

Vai rolar automaticamente. Lembre-se de adicionar o prefixo "#".

okw
fonte
1
Usando a forma primitiva de âncora com nome, você pode ter URL que inclui o hash Ex mywebsite.com/page-about/#123 Bookmarking inclui o comportamento ScrollIntoView de hash + também.
OKW
1
Seria ótimo se você pode explicar um pouco
JGallardo
6

Javascript simples:

window.location = "#elementId"
Luiz Picanço
fonte
5
<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

Este exemplo mostra para localizar um determinado div id, ou seja, 'idVal' neste caso. Se você tiver divs / tabelas subsequentes que serão abertas nesta página pelo ajax, poderá atribuir divs exclusivos e chamar o script para rolar para o local específico de cada conteúdo de divs.

Espero que isso seja útil.

user2793243
fonte
4
<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Yogesh Rathod
fonte
Seria ótimo se você adicionar alguns comentários ao seu código. Como isso ajuda o solicitante a resolver sua pergunta?
Artemix
1

Tente isto

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});
Ajay-Systematix
fonte
0

Aqui está uma variante da abordagem leve de @ juraj-blahunka . Esta função não assume que o contêiner seja o documento e apenas rolará se o item estiver fora de vista. A fila de animação também está desabilitada para evitar quedas desnecessárias.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};
Richie
fonte
Eu tive o problema de rejeição, mas o método não funciona
Anon
0

Usando jquery.easing.min.js, com erros corrigidos de console do IE

Html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

Jquery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });
Super Model
fonte
Isso é código demais para uma tarefa tão simples. location.hash = 'idOfElement';deve bastar
Kolob Canyon