down - Desplácese hasta la parte superior de la página utilizando JavaScript/jQuery?
scroll jquery ejemplos (30)
Motivación
Esta solución simple funciona de forma nativa e implementa un desplazamiento suave a cualquier posición.
Evita el uso de enlaces de anclaje (aquellos con # ) que, en mi opinión, son útiles si desea vincular a una sección, pero no son tan cómodos en algunas situaciones, especialmente cuando se apunta a la parte superior, lo que podría llevar a dos URL diferentes que apuntan a la misma ubicación ( http://www.example.org y http://www.example.org/# ).
Solución
Coloque una identificación en la etiqueta a la que desea desplazarse, por ejemplo, su primera sección , que responda a esta pregunta, pero la identificación podría ubicarse en cualquier parte de la página.
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>
Luego, como botón, puede usar un enlace, simplemente edite el atributo onclick con un código como este.
<a onclick="document.getElementById(''top'').scrollIntoView({ behavior: ''smooth'', block: ''start'', inline: ''nearest'' })">Click me</a>
Donde el argumento de document.getElementById es el id de la etiqueta a la que desea desplazarse después de hacer clic.
Tengo un <button> en la página, cuando se presiona este botón, se muestra un <div> oculto usando jQuery.
¿Cómo me desplazo a la parte superior de la página con un comando JavaScript / jQuery en esa función? Es deseable incluso si la barra de desplazamiento salta instantáneamente a la parte superior. No estoy buscando un desplazamiento suave.
¿Por qué no usa JQuery en la función incorporada scrollTop:
$(''html, body'').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom
Corto y sencillo!
Activa todos los navegadores. Buena suerte
var process;
var delay = 50; //milisecond scroll top
var scrollPixel = 20; //pixel U want to change after milisecond
//Fix Undefine pageofset when using IE 8 below;
function getPapeYOfSet() {
var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
return yOfSet;
}
function backToTop() {
process = setInterval(function () {
var yOfSet = getPapeYOfSet();
if (yOfSet === 0) {
clearInterval(process);
} else {
window.scrollBy(0, -scrollPixel);
}
}, delay);
}
Con window.scrollTo(0, 0); es bien rapido
Así que probé el ejemplo de Mark Ursino, pero en Chrome no pasa nada.
y encontré esto
$(''.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);
});
});
Probé los 3 navegadores y funciona.
estoy usando blueprint css
esto es cuando un cliente hace clic en el botón "Reservar ahora" y no tiene el período de alquiler seleccionado, se mueve lentamente hacia la parte superior donde están los calendarios y abre un cuadro de diálogo que señala los 2 campos, después de 3 segundos, se desvanece
El viejo #top puede hacer el truco.
document.location.href = "#top";
Funciona bien en FF, IE y Chrome
Ninguna de las respuestas anteriores funcionará en SharePoint 2016.
Se debe hacer así: https://sharepoint.stackexchange.com/questions/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
No necesitas a JQuery. Simplemente puedes llamar al guión
window.location = ''#''
Al hacer clic en el botón "Ir arriba"
Demostración de muestra:
PD: No utilice este enfoque cuando esté utilizando bibliotecas modernas como angularjs. Eso podría romper la URL hashbang.
No necesitas jQuery para hacer esto. Una etiqueta HTML estándar será suficiente ...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
Prueba este código:
$(''html, body'').animate({
scrollTop: $("div").offset().top
}, time);
div => Dom Elemento donde desea mover el desplazamiento.
tiempo => milisegundos, define la velocidad del desplazamiento.
Prueba esto
<script>
$(window).scrollTop(100);
</script>
Prueba esto
<script>
$(function(){
$(''a'').click(function(){
var href =$(this).attr("href");
$(''body, html'').animate({
scrollTop: $(href).offset().top
}, 1000)
});
});
</script>
Puedes intentar usar JS como en este Fiddle http://jsfiddle.net/5bNmH/1/
Agregue el botón "Ir al inicio" en el pie de página:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>
Realmente extraño: esta pregunta está activa desde hace cinco años y todavía no hay una respuesta de JavaScript de vainilla para animar el desplazamiento ... Así que aquí tienes:
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)
Si lo desea, puede envolver esto en una función y llamarlo a través del atributo onclick . Revisa este jsfiddle
Nota: Esta es una solución muy básica y quizás no la más eficaz. Un ejemplo muy elaborado se puede encontrar aquí: https://github.com/cferdinandi/smooth-scroll
Si desea un desplazamiento suave, intente algo como esto:
$("a[href=''#top'']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Eso tomará cualquier etiqueta <a> cuyo href="#top" y haga que se desplace hacia la parte superior.
Si no desea un desplazamiento suave, puede hacer trampa y detener la animación de desplazamiento suave casi tan pronto como la inicie ... así:
$(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;
});
});
No tengo idea de si está recomendado / permitido, pero funciona :)
¿Cuándo usarías esto? No estoy seguro, pero tal vez cuando quieras usar un clic para animar una cosa con Jquery, ¿pero hacer otra sin animación? es decir, abra un panel de inicio de sesión de administrador deslizable en la parte superior de la página, y salte instantáneamente a la parte superior para verlo.
Si no necesita el cambio para animar, entonces no necesita usar ningún complemento especial, solo uso el método de JavaScript nativo window.scrollTo. Al pasar 0,0, la página se desplazará a la parte superior izquierda al instante. .
window.scrollTo(x-coord, y-coord);
Parámetros
- x-coord es el píxel a lo largo del eje horizontal.
- y-coord es el píxel a lo largo del eje vertical.
Si quieres hacer un desplazamiento suave, prueba esto:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Otra solución es el método window.scrollTo de JavaScript:
window.scrollTo(x-value, y-value);
Parámetros:
- El valor x es el píxel a lo largo del eje horizontal.
- valor-y es el píxel a lo largo del eje vertical.
Simplemente puedes usar un objetivo desde tu enlace, como #someid, donde #someid es el id del div.
O bien, puede usar cualquier cantidad de complementos de desplazamiento que lo hagan más elegante.
http://plugins.jquery.com/project/ScrollTo es un ejemplo.
Simplemente use este script para desplazarse hacia arriba directamente.
<script>
$(document).ready(function(){
$("button").click(function(){
($(''body'').scrollTop(0));
});
});
</script>
Solución no jQuery / JavaScript puro:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Todas estas sugerencias funcionan muy bien para diversas situaciones. Para aquellos que encuentran esta página a través de una búsqueda, uno también puede intentarlo. JQuery, sin plug-in, desplácese hasta el elemento.
$(''html, body'').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
desplazamiento 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));
}
})();
$(document).scrollTop(0); tambien funciona
Esto funcionará:
window.scrollTo(0, 0);
Intenta esto para desplazarte en la parte superior
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
lot users recomiendan seleccionar tanto las etiquetas html como las del cuerpo para compatibilidad con varios navegadores, como por ejemplo:
$(''html, body'').animate({ scrollTop: 0 }, callback);
Esto puede hacerte tropezar si estás contando con que tu devolución de llamada se ejecute solo una vez. De hecho, se ejecutará dos veces porque ha seleccionado dos elementos.
Si ese es un problema para ti, puedes hacer algo como esto:
function scrollToTop(callback) {
if ($(''html'').scrollTop()) {
$(''html'').animate({ scrollTop: 0 }, callback);
return;
}
$(''body'').animate({ scrollTop: 0 }, callback);
}
La razón por la que funciona es en Chrome $(''html'').scrollTop() devuelve 0, pero no en otros navegadores como Firefox.
Si no desea esperar a que se complete la animación en el caso de que la barra de desplazamiento ya se encuentre en la parte superior, intente esto:
function scrollToTop(callback) {
if ($(''html'').scrollTop()) {
$(''html'').animate({ scrollTop: 0 }, callback);
return;
}
if ($(''body'').scrollTop()) {
$(''body'').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
$(".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>
<script>
$("a[href=''#top'']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
en html
<a href="#top">go top</a>
<script>
$(function(){
var scroll_pos=(0);
$(''html, body'').animate({scrollTop:(scroll_pos)}, ''2000'');
});
</script>
Editar:
$(''html, body'').animate({scrollTop:(scroll_pos)}, 2000);
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;
});
}