Rolagem suave para div id jQuery

248

Eu tenho tentado obter uma rolagem para div código jquery id para funcionar corretamente. Com base em outra questão de estouro de pilha, tentei o seguinte

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

Mas não deu certo. Apenas encaixa na div. Eu também tentei

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

Sem progresso.

StevenPHP
fonte
1
Você já olhou para isso? stackoverflow.com/questions/3432656/…
The Vanilla Thrilla '/
@TheVanillaThrilla eu fiz, mas ele parecia muito inchado para uma única utilização ligação
StevenPHP
1
@StevenPHP, substituí o código JavaScript no seu exemplo de acordo com a minha resposta stackoverflow.com/a/26129950/947687 . E funciona jsfiddle.net/8tLdq/643 .
dizel3d
O OP é antigo, mas compartilharei este post para outros provenientes do SE. Aqui está um artigo que compartilha uma função simples para resolver o problema: smartik.ws/2015/01/…
Andrew Surdu

Respostas:

667

Você precisa animar o html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});
Kevin Lynch
fonte
9
@vector Eu tenho um problema, uma vez clicado, eu tenho que lutar com o jquery para rolar para cima, alguma solução?
precisa saber é o seguinte
@yesitsme ... cima ou para baixo no meu caso
Spectrum Grey
O @GraySpectrum up, apenas logo após clicar, parece que há um atraso.
precisa saber é o seguinte
1
Eu tenho a mesma pergunta, e se eu tiver alguns botões que precisam rolar para locais diferentes, tentei modificar esse código, mas ele não funciona. Você poderia fornecer outro exemplo?
Dreadlord
Encontrou alguma "correção" para isso. A rolagem do elemento apropriado agora está corrigida, mas ainda sobe e desce, clicando no mesmo destino "scroll-to": var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });Explicação: .basics-contenté a div interna do modal que eu realmente quero rolar, com targeto número de identificação do elemento ...
Roland
111

Se você deseja substituir a navegação href-id padrão na página sem alterar a marcação HTML para uma rolagem suave , use este ( exemplo ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});
dizel3d
fonte
3
Isso funciona bem, posso sugerir um pequeno ajuste var pos = $(id).offset().top;pode servar pos = $id.offset().top;
Davey
Muito agradável. Se você deseja que isso ocorra apenas em determinados links (digamos que você tenha alguns para mostrar ou ocultar informações), basta adicionar um nome de classe a eles e anexar seu nome de classe (digitar scroller) ao final da declaração da partida (por exemplo, um [href ^ = "#"]. scroller).
Corsário
Como você faz isso sem o jQuery?
Vadorequest
21

aqui estão meus 2 centavos:

Javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

e o alvo:

<h2 id="contact">Contact</h2>
Alexandre Mélard
fonte
Isso funciona apenas se você não declarar doctype.
David Martins
6
Para que serve evalaqui?
código está
Eu acho que é necessária $('html, body').animatepara se deslocar
Irshad Khan
6

Aqui está o que eu uso:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

A beleza deste é que você pode usar um número ilimitado de links de hash e IDs correspondentes sem precisar executar um novo script para cada um.

Se você estiver usando o WordPress, insira o código no footer.phparquivo do seu tema antes da etiqueta do corpo de fechamento </body>.

Se você não tiver acesso aos arquivos do tema, poderá incorporar o código diretamente no editor de postagem / página (você deve editar a postagem no modo Texto) ou em um widget de Texto que será carregado em todas as páginas.

Se você estiver usando qualquer outro CMS ou apenas HTML, poderá inserir o código em uma seção que é carregada em todas as páginas antes da etiqueta do corpo de fechamento </body>.

Se você precisar de mais detalhes, confira meu post rápido aqui: jQuery smooth scroll to id

Espero que ajude, e deixe-me saber se você tiver dúvidas sobre isso.

Bibiano Wenceslao
fonte
Amar como é simples e baunilha, perfeito.
DoPeT
5

mais um exemplo:

Link HTML:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

Âncora HTML:

  <div id="featured">My content here</div>
Eugen
fonte
3

tem certeza de que está carregando o arquivo jQuery scrollTo Plugin?

você pode estar recebendo um objeto: método não encontrado "scrollTo" no console.

o método scrollTO não é um método jquery nativo. Para usá-lo, é necessário incluir o arquivo de plug-in jquery scroll To.

ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: adicione isso na seção principal.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>
MortalViews
fonte
Esta deveria ter sido a resposta aceita. O código da pergunta está correto e funciona bem. Parece que o plugin scrollTo não está / não estava funcionando. . .Ele não perguntou sobre diferentes maneiras de fazer algo semelhante.
precisa
3

Este script é uma melhoria do script do Vector. Eu fiz uma pequena alteração. Portanto, esse script funciona para todos os links com a rolagem de página da classe.

A princípio sem flexibilização:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Para facilitar, você precisará do Jquery UI:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Adicione isso ao script:

'easeOutExpo'

Final

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Todos os servidões que você pode encontrar aqui: Cheat Sheet .

Ramon Weijenbarg
fonte
3

Este código será útil para qualquer link interno na web

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });
iDanielBH
fonte
1

Você pode fazer isso usando o seguinte código jQuery simples.

Tutorial, demonstração e código fonte podem ser encontrados a partir daqui - Rolagem suave para div usando jQuery

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>
JoyGuru
fonte
1

Aqui eu tentei isso, que funciona muito bem para mim.

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

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>
waqas noor
fonte
O que é diferente na sua resposta?
Yunandtidus 18/05/19
1

Isso pode ser feito em JS simples:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

O suporte ao navegador é um pouco problemático, mas os navegadores modernos o suportam .

Nitin Jadhav
fonte
0

Isso funciona para mim.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Obrigado.

Y. Joy Ch. Singha
fonte
0

Aqui está minha solução para suavizar a rolagem para div / anchor usando jQuery, caso você tenha um cabeçalho fixo, para que ele não role por baixo. Também funciona se você o vincular de outra página.

Apenas substitua ".site-header" por div que contém seu cabeçalho.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});
Mario
fonte