Como rolar para o topo da página usando JavaScript? É desejável mesmo que a barra de rolagem salte instantaneamente para o topo. Não estou procurando uma rolagem suave.
Como rolar para o topo da página usando JavaScript? É desejável mesmo que a barra de rolagem salte instantaneamente para o topo. Não estou procurando uma rolagem suave.
Respostas:
Se você não precisar alterar a animação, não precisará usar nenhum plug-in especial - eu apenas usaria o método JavaScript window.scrollTo nativo - passar 0,0 moverá a página instantaneamente para o canto superior esquerdo instantaneamente .
window.scrollTo(x-coord, y-coord);
Parâmetros
window.scrollTo(0, document.body.scrollHeight);
Se você deseja uma rolagem suave, tente algo como isto:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Isso pega qualquer <a>
marca href="#top"
e torna a rolagem suave até o topo.
window.pageYOffset
seria a propriedade do objeto e windowl̶e̶m̶e̶n̶t window da janela.
Tente isso para rolar no topo
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
Melhor solução com animação suave:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
Referência: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
ScrollOptions
(para determinados navegadores): github.com/iamdustan/smoothscroll
Você não precisa do jQuery para fazer isso. Uma tag HTML padrão será suficiente ...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
Todas essas sugestões funcionam muito bem para várias situações. Para aqueles que acham desta página através de uma pesquisa, também se pode dar esta uma tentativa. JQuery, sem plug-in, role para o elemento
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
rolagem suave, javascript puro:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>
Editar:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Outra maneira de rolar com a margem superior e esquerda:
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });
animate
função, em vez disso você deve usar: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
em html
<a href="#top">go top</a>
Realmente estranho: esta questão está ativa há cinco anos e ainda não há resposta JavaScript baunilha para animar a rolagem ... Então, aqui está:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
Se desejar, você pode agrupar isso em uma função e chamar isso através do onclick
atributo Verifique este jsfiddle
Nota: Essa é uma solução muito básica e talvez não seja a mais eficiente. Um exemplo muito elaborado pode ser encontrado aqui: https://github.com/cferdinandi/smooth-scroll
Se você quiser fazer uma rolagem suave, tente o seguinte:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Outra solução é o método window.scrollTo do JavaScript:
window.scrollTo(x-value, y-value);
Parâmetros:
Com window.scrollTo(0, 0);
é muito rápido
, tentei o exemplo de Mark Ursino, mas no Chrome nada acontece
e achei isso
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});
testei todos os três navegadores e funciona
usando o blueprint css;
é quando um cliente clica no botão "Reservar agora" e não tem o período de locação selecionado, move-se lentamente para o topo onde estão os calendários e abre uma caixa de diálogo apontando para os 2 campos, depois de 3 segundos desaparece
Um monte de usuários recomendamos selecionar ambas as tags html e body para compatibilidade cross-browser, assim:
$('html, body').animate({ scrollTop: 0 }, callback);
Isso pode atrapalhá-lo se você estiver contando com o retorno de chamada sendo executado apenas uma vez. De fato, ele será executado duas vezes porque você selecionou dois elementos.
Se isso é um problema para você, você pode fazer algo assim:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}
A razão pela qual isso funciona é no Chrome $('html').scrollTop()
retorna 0, mas não em outros navegadores, como o Firefox.
Se você não quiser esperar a animação ser concluída, caso a barra de rolagem já esteja no topo, tente o seguinte:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
O velho #top
pode fazer o truque
document.location.href = "#top";
Funciona bem em FF, IE e Chrome
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>
$(document).scrollTop(0);
também funciona.
Solução JavaScript pura:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
Eu escrevo uma solução animada no Codepen
Além disso, você pode tentar outra solução com a scroll-behavior: smooth
propriedade CSS .
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Por que você não usa a função embutida JQuery scrollTop:
$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom
Curto e simples!
Você não precisa do JQuery. Simplesmente você pode chamar o script
window.location = '#'
ao clicar no botão "Ir para o topo"
Exemplo de demonstração:
PS: Não use essa abordagem quando estiver usando bibliotecas modernas como angularjs. Isso pode ter quebrado o hashbang da URL.
Basta usar este script para rolar para o topo direto.
<script>
$(document).ready(function(){
$("button").click(function(){
($('body').scrollTop(0));
});
});
</script>
Se você não quiser uma rolagem suave, poderá trapacear e interromper a animação de rolagem suave assim que iniciá-la ... assim:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});
Eu não tenho idéia se é recomendado / permitido, mas funciona :)
Quando você usaria isso? Não tenho certeza, mas talvez quando você queira usar um clique para animar uma coisa com o Jquery, mas faça outra sem animação? ou seja, abra um painel de login do administrador na parte superior da página e pule instantaneamente para o topo para vê-lo.
Esta solução simples funciona nativamente e implementa uma rolagem suave para qualquer posição.
Evita o uso de links âncora (aqueles com #
) que, na minha opinião, são úteis se você deseja vincular a uma seção, mas não são tão confortáveis em algumas situações, especialmente quando apontam para o topo, o que pode levar a dois URLs diferentes que apontam para o mesmo local ( http://www.example.org e http://www.example.org/# ).
Coloque um ID na tag para a qual você deseja rolar, por exemplo, sua primeira seção , que responde a essa pergunta, mas o ID pode ser colocado em qualquer lugar da página.
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
Então, como um botão, você pode usar um link, basta editar o atributo onclick com um código como este.
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>
Onde o argumento de document.getElementById
é o ID da tag para a qual você deseja rolar após clicar.
Você pode simplesmente usar um destino no seu link, como #someid, em que #someid é o ID da div.
Ou você pode usar qualquer número de plugins de rolagem que tornem isso mais elegante.
http://plugins.jquery.com/project/ScrollTo é um exemplo.
Você pode tentar usar o JS como neste Fiddle http://jsfiddle.net/5bNmH/1/
Adicione o botão "Ir para o topo" no rodapé da página:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>
function scrolltop() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#back-to-top').fadeIn(duration);
} else {
jQuery('#back-to-top').fadeOut(duration);
}
});
jQuery('#back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
}
Nenhuma das respostas acima funcionará no SharePoint 2016.
Tem que ser feito assim: /sharepoint/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;