jQuery rolar para o elemento

2327

Eu tenho este inputelemento:

<input type="text" class="textfield" value="" id="subject" name="subject">

Então eu tenho alguns outros elementos, como outras entradas de texto, áreas de texto etc.

Quando o usuário clica em que inputcom #subject, a página deve rolar até o último elemento da página, com uma animação agradável. Deve ser uma rolagem para baixo e não para cima.

O último item da página é um submitbotão com #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

A animação não deve ser muito rápida e deve ser fluida.

Estou executando a versão mais recente do jQuery. Prefiro não instalar nenhum plugin, mas usar os recursos padrão do jQuery para conseguir isso.

javascript jquery scroll DiegoP.
fonte

3

developer.mozilla.org/pt-BR/docs/Web/API/Element/scrollIntoView

Christophe Roussy

scrollTofoi desativado para mim por causa de um plug-in do Chrome, não sei qual.

26419 Jacksonkr

4025

Supondo que você tenha um botão com o ID button, tente este exemplo:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Eu obtive o código do artigo Role suavemente até um elemento sem um plugin jQuery . E eu testei no exemplo abaixo.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

Expandir snippet

Steve
fonte

24

Isso não funcionará em todos os casos. Veja stackoverflow.com/questions/2905867/…

Jānis Elmeris

7

@BarryChapman não exatamente. Depois de pesquisar no Google, eu encontrei isso , então as duas tags são necessárias se você não quiser ter lógica extra por tipo de navegador.

S3m3n

73

Se você não deseja animação e deseja pular instantaneamente para o elemento, use em .scrollTop(…)vez de .animate({scrollTop: …}, …).

Rory O'Kane

11

Além da sua solução (que funciona muito bem), você pode adicionar uma função completa que adiciona a hashtag ao URL. Nesse caso, ele não será rolado, porque o scrollTo já rolou para a posição correta e, se um usuário copiar o URL, ele será automaticamente encaixado no lugar certo na página.

Sander

10

se você usar um retorno de chamada para executar quando a animação estiver concluída e perceber que o retorno de chamada é acionado duas vezes com esta solução, tente usar "$ ('html body'). animate (..." em vez de "$ ('html, body') .animate (... "a vírgula criou dois eventos animados. um para html e outro para corpo. você realmente quer apenas um para o corpo html Obrigado @TJ Crowder stackoverflow.com/questions/8790752/…

BoatCode

526

jQuery .scrollTo (): Visualizar - Demonstração, API, Origem

Eu escrevi este plugin leve para facilitar a rolagem da página / elemento. É flexível onde você pode passar um elemento de destino ou valor especificado. Talvez isso possa fazer parte do próximo lançamento oficial do jQuery, o que você acha?

Exemplos de uso:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Opções:

scrollTarget : Um elemento, sequência ou número que indica a posição de rolagem desejada.

offsetTop : um número que define espaçamento adicional acima do destino da rolagem.

duration : Uma sequência ou número que determina por quanto tempo a animação será executada.

easing : Uma cadeia que indica qual função de facilitação usar na transição.

complete : uma função para chamar quando a animação estiver concluída.

Timothy Perez
fonte

2

Estava funcionando até uma atualização recente no chrome. Eu tenho uma versão que funciona atualmente no memoryboxweddings.com/photography-posts (se você quiser experimentar). Vou postar uma atualização assim que for corrigida.

Timothy Perez

Corrigido, verifica-se que na verdade era um arquivo JS do jquery.com que estava sendo executado. Deve funcionar agora se você tentar.

Timothy Perez

4

@ TimothyPerez: Tenho certeza que isso significa algo permissivo para uso comercial? Tenho certeza de que muitas pessoas gostariam de usar esse trecho de código em qualquer lugar de seus sites e que as ajudaria a dormir um pouco mais fácil à noite? Talvez algo como a licença do MIT possa atender às suas necessidades? en.wikipedia.org/wiki/MIT_License

Robert Massaioli

13

$ ('body') não funcionou no FF, então tentei $ ('html, body') que funcionava.

Kiranvj

5

Se alguém precisar dessa fonte de script, então aqui você pode obtê-la flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

Arturs

370

Se você não está muito interessado no efeito de rolagem suave e apenas na rolagem para um elemento específico, não precisa de alguma função jQuery para isso. Javascript tem seu caso coberto:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Então, tudo que você precisa fazer é: $("selector").get(0).scrollIntoView();

.get(0) é usado porque queremos recuperar o elemento DOM do JavaScript e não o elemento DOM do JQuery.

Atharva
fonte

12

Você também pode usar $(selector)[0]?

RobW 17/03/14

16

RobW, sim, você pode simplesmente usar [0], mas get (0) protege você contra índices indefinidos ou negativos. Veja a fonte: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

corbacho

21

Se você não deseja usar o jQuery, basta usar document.getElementById('#elementID').scrollIntoView(). Não adianta carregar uma biblioteca de ~ 100k apenas para selecionar um elemento e depois convertê-lo para JavaScript comum.

Gavin

62

@Gavin Tenho certeza que você quis dizer isso:document.getElementById('elementID').scrollIntoView()

Brian

3

Legal. Mas antes de usar, verifique se o navegador suporta isso. De acordo com a Mozilla "Esta é uma tecnologia experimental"

Tejasvi Hegde 16/11/16

48

Usando este script simples

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Seria possível classificar que, se uma tag de hash for encontrada no URL, o scrollTo animará para o ID. Se nenhuma tag hash for encontrada, ignore o script.

Warface
fonte

$(window.location.hash)não funcionará para hashes que não atendam à detecção de identificação de regex do jQuery. Por exemplo, hashes que contêm números. Também é um pouco perigoso; o formato da entrada deve ser validado para que você não selecione outro elemento.

precisa saber é o seguinte

35

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

Expandir snippet

davidcondrey
fonte

1

Para torná-lo mais universal e para remover colocação desnecessária de hashtag na janela ligação navegador Eu só beliscou o código como a seguir:

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

bubencode

31

A solução de Steve e Peter funciona muito bem.

Mas, em alguns casos, talvez seja necessário converter o valor em um número inteiro. Estranhamente, o valor retornado de $("...").offset().topàs vezes é in float.
Usar:parseInt($("....").offset().top)

Por exemplo:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

Tejasvi Hegde
fonte

22

Uma versão compacta da solução "animar".

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Uso básico: $('#your_element').scrollTo();

Rezgar Cadro
fonte

22

É assim que eu faço.

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

Funciona em qualquer navegador.

Pode ser facilmente envolvido em uma função

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Aqui está um exemplo de trabalho

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Expandir snippet

Documentos

Edvard Åkerberg
fonte

6

Muito curto e doce. Uma coisa a ser observada - acho que isso apenas a rola para exibição (pode estar na parte inferior da janela de exibição), em vez de rolá-la para o topo da janela de exibição, como a configuração scrollTop.

OG Sean

20

Eu sei uma maneira sem jQuery:

document.getElementById("element-id").scrollIntoView();

Edit: Já faz dois anos e eu ainda estou aleatoriamente recebendo reputação deste post lmao

GameMaster1928
fonte

18

Se você estiver manipulando apenas a rolagem para um elemento de entrada, poderá usar focus(). Por exemplo, se você deseja rolar para a primeira entrada visível:

$(':input:visible').first().focus();

Ou a primeira entrada visível em um contêiner com classe .error:

$('.error :input:visible').first().focus();

Agradecemos a Tricia Ball por apontar isso!

Benjamin Oakes
fonte

17

Com esta solução, você não precisa de nenhum plug-in e não é necessária nenhuma configuração além de colocar o script antes da </body>tag de fechamento .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

No carregamento, se houver um hash no endereço, rolamos para ele.

E - sempre que você clica em um alink com um hrefhash #top, por exemplo , rolamos para ele.

Jonathan
fonte

Isso provavelmente deve ser > 1em vez de 0, simplesmente porque /#faz com que esse script para quebrar

Tallboy

Tecnicamente, você não deve terminar com um URL de hash vazio, a menos que os links sejam mal construídos, mas TY. (embora a minha própria versão deste código tem este patch já incluído ^^)

Jonathan

Há um tremor associado a esse código, no entanto, é facilmente corrigível. Você precisa return false;no final do evento ao clicar para impedir que a ação padrão - rolando imediatamente para a âncora - aconteça.

roncli

2

bom ponto de @roncli - alternativamente você pode apenas fazere.preventDefault();

Jonathan

e.preventDefault()no entanto, não atualiza o hash no URL ao clicar, é sempre um URL sem hash #

jayasurya_j

8

Na maioria dos casos, seria melhor usar um plugin. A sério. Vou divulgar o meu aqui . Claro que existem outros também. Mas verifique se eles realmente evitam as armadilhas para as quais você deseja um plug-in - nem todos eles.

Eu escrevi sobre as razões para usar um plugin em outro lugar . Em poucas palavras, o liner subjacente à maioria das respostas aqui

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

é ruim UX.

A animação não responde às ações do usuário. Ele continua mesmo se o usuário clicar, tocar ou tentar rolar.
Se o ponto inicial da animação estiver próximo ao elemento de destino, a animação será dolorosamente lenta.
Se o elemento de destino for colocado próximo à parte inferior da página, ele não poderá ser rolado para o topo da janela. A animação de rolagem para abruptamente, em movimento intermediário.

Para lidar com esses problemas (e vários outros ), você pode usar um plugin meu, jQuery.scrollable . A chamada então se torna

$( window ).scrollTo( targetPosition );

e é isso. Claro, existem mais opções .

No que diz respeito à posição alvo, $target.offset().topfaz o trabalho na maioria dos casos. Mas lembre-se de que o valor retornado não leva em consideração uma borda no htmlelemento ( consulte esta demonstração ). Se você precisar que a posição alvo seja precisa em qualquer circunstância, é melhor usar

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Isso funciona mesmo se uma borda no htmlelemento estiver definida.

hashchange
fonte

8

Animações:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

fonte

8

Se você deseja rolar dentro de um contêiner excedente (em vez de $('html, body')respondido acima), trabalhando também com posicionamento absoluto, esta é a maneira de fazer:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

FAjir
fonte

7

Maneira fácil de obter a rolagem da página para segmentar o ID da div

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Irshad Khan
fonte

6

Esta é minha abordagem abstraindo os IDs e hrefs, usando um seletor de classe genérico

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

Expandir snippet

vascogaspar
fonte

6

Muito simples e fácil de usar plugin jQuery personalizado. Basta adicionar o atributo scroll=ao seu elemento clicável e defina seu valor para o seletor para o qual você deseja rolar.

Assim: <a scroll="#product">Click me</a>. Pode ser usado em qualquer elemento.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

DevWL
fonte

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

kayz1
fonte

4

$('html, body').animate(...) não para mim no iphone, navegador android safari chrome.

Eu tive que direcionar o elemento de conteúdo raiz da página.

$ ('# cotnent'). animar (...)

Aqui está o que eu acabei com

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Todo o conteúdo do corpo conectado com uma div #content

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

Shahdat
fonte

Você realmente não deve usar o farejador de agente do usuário. webaim.org/blog/user-agent-string-history

Alex Podworny

Adicionar quebra de palavra: quebra de tudo; ao seu elemento CSS que está com problemas. Visualização na web para Android / iOS jQuery.animate ({scrollTop: y}) posição incorreta. medium.com/@ellery.leung/…

daliaessam 06/04/19

4

Esta é a resposta da Atharva em: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Só queria adicionar se o documento estiver em um iframe, você pode escolher um elemento no quadro pai para rolar para exibição:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

cynya
fonte

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

fonte

3

Quando o usuário clica nessa entrada com #subject, a página deve rolar para o último elemento da página com uma bela animação. Deve ser uma rolagem para baixo e não para cima.

O último item da página é um botão de envio com #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Isso rolará primeiro para baixo até #submit seguida, restaure o cursor para a entrada que foi clicada, que imita uma rolagem para baixo e funciona na maioria dos navegadores. Também não requer jQuery, pois pode ser escrito em JavaScript puro.

Essa maneira de usar a focusfunção pode imitar a animação de uma maneira melhor, através de focuschamadas em cadeia . Eu não testei essa teoria, mas seria algo parecido com isto:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

Khaled.K
fonte

3

Eu configurei um elemento de rolagem do módulo npm install scroll-element. Funciona assim:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Escrito com ajuda das seguintes postagens do SO:

Aqui está o código:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

svnm
fonte

2

Para mostrar o elemento completo (se possível com o tamanho atual da janela):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

Roman Shamritskiy
fonte

2

Eu escrevi uma função de uso geral que rola para um objeto jQuery, um seletor de CSS ou um valor numérico.

Exemplo de uso:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

O código da função:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

isapir
fonte

2

Pelo que vale, é assim que eu consegui obter esse comportamento para um elemento geral que pode estar dentro de um DIV com rolagem. No nosso caso, não rolamos o corpo inteiro, mas apenas elementos específicos com estouro: auto; dentro de um layout maior.

Ele cria uma entrada falsa da altura do elemento de destino e, em seguida, coloca um foco nele, e o navegador cuidará do resto, não importa o quão profundo você esteja na hierarquia de rolagem. Funciona como um encanto.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

martinh_kentico
fonte

2

Isso funcionou para mim:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

Polaris
fonte

2

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

Expandir snippet

Minguocode
fonte

2

ONELINER

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Mostrar snippet de código

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

<div class="foot">Some footer</div>

Expandir snippet

Kamil Kiełczewski
fonte

1

funciona perfeitamente!

jjoselon

1

Resposta atualizada a partir de 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

stardust4891
fonte

Você deve este seletor para o corpo: [document.documentElement, document.body] AND Não precisa de deslocamento do corpo na equação. $ ('# subject'). offset (). top é suficiente.

ali6p

jQuery rolar para o elemento

Respostas: