Estoy creando las páginas de mis productos utilizando el código de la etiqueta del objeto, pero cada vez que hago clic en el botón "Ver", la página siguiente permanece en la misma posición que la página anterior que acabo de ver. ¿Cómo puedo agregar una funcionalidad que me permita ver desde la parte superior de la página cada vez que haga clic en el botón "ver"?
2020-12-07 23:14:07
Usando Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Usando jQuery:
$ (función () {
$ ('cuerpo'). scrollTop (0);
});
|
jQuery (documento) .ready (function ($) {
$ (ventana) .scroll (function () {
if ($ (esto) .scrollTop ()> 50) {
$ ('# backToTop'). fadeIn ('lento');
} más {
$ ('# backToTop'). fadeOut ('lento');
}
});
$ ('# backToTop'). click (function () {
$ ("html, cuerpo"). animate ({scrollTop: 0}, 500);
// $ ("html, cuerpo"). scrollTop (0); // Para sin animación
falso retorno;
});
});
por favor refiérase a esto, que esto ayude
|
A veces, colocar el desplazamiento en el cuerpo no funciona si su contenido actual se genera a través de jQuery (como en mi caso). En tal situación, puede hacer lo siguiente.
$ (función () {
$ ('html'). scrollTop (0);
});
|
Un pequeño problema con la solución jQuery de Subhash es que debe llamar a este código dentro de $ (document) .ready () para que su selector $ ('body') funcione. Es posible que el evento listo no se active antes de que se hayan representado partes de su página en la pantalla.
Un mejor enfoque es simplemente modificar la ubicación del usuario como una solución a esta 'característica' del navegador:
// Por encima de todo su código $ (document) .ready (...)
document.location = "#";
|
Solución HTML simple para saltar entre partes de la página
// Coloque una etiqueta como esta donde le gustaría ir
// en tu caso en la parte superior
// llegará allí haciendo clic en este enlace, mejor use una imagen, alcance su, haciendo clic en este, también podemos usar una imagen, alinee a la derecha
último
|
Botón de volver al principio, funciona en todos los navegadores Para cambiar la velocidad de desplazamiento simplemente cambie la x en el contador - = x aquí x = 10
function scrollToTop () {
var myBody = document.body;
var id = setInterval (secondFunction, 1);
var height = window.pageYOffset;
contador var = altura;
function secondFunction () {
if (window.pageYOffset == 0) {
clearInterval (id);
}
else {
if (!! navigator.userAgent.match (/ Trident / g) || !! navigator.userAgent.match (/ MSIE / g)) {
contador - = 10;
mostrador--;
document.documentElement.scrollTop = contador;
}
else {
contador - = 10;
mostrador--;
myBody.scrollTop = contador;
}
}
}
}
cuerpo {
altura: 5000px;
margen: 0;
acolchado: 0;
}
.volver arriba {
posición: fija;
/ * Fijado en la página * /
arriba: auto;
abajo: 20px;
izquierda: auto;
derecha: 20px;
color de fondo: carmesí;
color blanco;
relleno: 5px;
cursor: puntero;
}
encabezado {
posición: relativa;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100px;
color de fondo: negro;
}
ARRIBA
|
Asignar un id = "# body" y tabindex en la etiqueta
y usa jquery focus ()
$ (función () {
$ ("# cuerpo"). attr ("tabindex", - 1) .focus ();
}
|
Puede utilizar este método:
function gototop () {
if (window.scrollY> 0) {
window.scrollTo (0, window.scrollY-20)
setTimeout ("gototop ()", 10)
}
}
|
Tu respuesta
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("editor externo", función () {
StackExchange.using ("fragmentos", función () {
StackExchange.snippets.init ();
});
});
}, "fragmentos de código");
StackExchange.ready (function () {
var channelOptions = {
etiquetas: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("editor externo", función () {
// Debe activar el editor después de los fragmentos, si los fragmentos están habilitados
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("fragmentos", función () {
createEditor ();
});
}
else {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'respuesta',
autoActivateHeartbeat: falso,
convertImagesToLinks: verdadero,
noModals: cierto,
showLowRepImageUploadWarning: true,
reputacionToPostImages: 10,
bindNavPrevention: verdadero,
sufijo: "",
imageUploader: {
brandingHtml: "Desarrollado por \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.725645.40531 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 14.648.942348 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5454.5C35.8 3520.49455C35.8 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.4926.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "d = \" M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134136.3734932 13.4902 28.1109 28.1161 12.7799 12.7229 12.6616C28.1109 28.121 12.8346C28.1256 28.1301 12.9342 28.1301 12.8854 12.983C28.1301 27.2502 15.2321 14.4373 25.777 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 22,8472 14,5218 14.7787C23.176 22.5437 14.6393 14.5218C21.7977 21.2429 15.0123 21.2429 14.5218 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6335ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 276.231124 11.537 11.511 11.6321 276.231124 11.537 .1317 10.6491 24.1317 9.27932Z \ "/ \ u003e \ u003cpath d = \" M16.8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079.1 5.829 4.628 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 5.46232 5.00012C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.000126.52881 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.25335 11.3711 13.8962 12.4044 13.9159.87C13.2588 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0 .313354 6.59049V11.9512C0.313354 13.2535 0.791758 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.81 061C11 2.859 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e
contentPolicyHtml: "Contribuciones de usuario con licencia bajo \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (política de contenido) \ u003c / a \ u003e",
allowUrls: verdadero
},
onDemand: verdadero,
discardSelector: ".discard-answer"
, inmediatamenteShowMarkdownHelp: true, enableSnippets: true
});
}
});
¡Gracias por contribuir con una respuesta a Stack Overflow!
Asegúrese de responder la pregunta. ¡Proporcione detalles y comparta su investigación!
Pero evita ...
Pedir ayuda, aclaraciones o responder a otras respuestas.
Hacer declaraciones basadas en opiniones; respóndelos con referencias o experiencia personal.
Para obtener más información, consulte nuestros consejos sobre cómo escribir buenas respuestas.
Borrador guardado
Borrador descartado
Regístrate o inicia sesión
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Regístrese con Google
Registrarse usando Facebook
Regístrese con correo electrónico y contraseña
Enviar
Publicar como invitado
Nombre
Email
Requerido, pero nunca mostrado
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f19311301% 2fhow-to-scroll-back-to-the-top-of-page-on- button-click% 23new-answer ',' question_page ');
}
);
Publicar como invitado
Nombre
Email
Requerido, pero nunca mostrado
Publica tu respuesta
Descarte
Al hacer clic en "Publicar su respuesta", acepta nuestros términos de servicio, política de privacidad y política de cookies.
No es la respuesta que estás buscando? Lea otras preguntas en las etiquetas javascript jquery html css o formule su propia pregunta.