javascript - link - Haga que el enlace de anclaje vaya algunos píxeles por encima de donde está vinculado a
link html (15)
Al trabajar solo con CSS, puede agregar un relleno al elemento anclado (como en la solución anterior) Para evitar espacios en blanco innecesarios, puede agregar un margen negativo de la misma altura:
#anchor {
padding-top: 50px;
margin-top: -50px;
}
No estoy seguro si esta es la mejor solución en cualquier caso, pero funciona bien para mí.
No estoy seguro de la mejor manera de preguntar / buscar esta pregunta:
Cuando hace clic en un enlace de anclaje, lo lleva a esa sección de la página con el área vinculada que se encuentra al MÁS ALTO de la página. Me gustaría que el enlace de anclaje me envíe a esa parte de la página, pero me gustaría un poco de espacio en la parte superior. Al igual que en, no quiero que me envíe a la parte vinculada con él en la parte superior, me gustaría 100 o más píxeles de espacio allí.
¿Esto tiene sentido? es posible?
Editado para mostrar código: es solo una etiqueta de anclaje:
<a href="#anchor">Click me!</a>
<p id="anchor">I should be 100px below where I currently am!</p>
Basado en la solution @Eric Olson solo modifique un poco para incluir el elemento de anclaje que deseo específicamente
// Function that actually set offset
function offsetAnchor(e) {
// location.hash.length different to 0 to ignore empty anchor (domain.me/page#)
if (location.hash.length !== 0) {
// Get the Y position of the element you want to go and place an offset
window.scrollTo(0, $(e.target.hash).position().top - 150);
}
}
// Catch the event with a time out to perform the offset function properly
$(document).on(''click'', ''a[href^="#"]'', function (e) {
window.setTimeout(function () {
// Send event to get the target id later
offsetAnchor(e);
}, 10);
});
Esto debería funcionar:
$(document).ready(function () {
$(''a'').on(''click'', function (e) {
// e.preventDefault();
var target = this.hash,
$target = $(target);
$(''html, body'').stop().animate({
''scrollTop'': $target.offset().top-49
}, 900, ''swing'', function () {
});
console.log(window.location);
return false;
});
});
Simplemente cambie el .top-49 a lo que se ajuste con su enlace de anclaje.
Esto funcionará sin jQuery y en la carga de la página.
(function() {
if (document.location.hash) {
setTimeout(function() {
window.scrollTo(window.scrollX, window.scrollY - 100);
}, 10);
}
})();
La respuesta de Eric es genial, pero realmente no necesitas ese tiempo de espera. Si está utilizando jQuery, puede esperar a que la página se cargue. Así que sugeriría cambiar el código a:
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function () {
offsetAnchor();
});
// Let the page finish loading.
$(document).ready(function() {
offsetAnchor();
});
Esto también nos libera de ese factor arbitrario.
La solución más fácil:
CSS
#link {
top:-120px; /* -(some pixels above) */
position:relative;
z-index:5;
}
HTML
<body>
<a href="#link">Link</a>
<div>
<div id="link"></div> /*this div should placed inside a target div in the page*/
text
text
text
<div>
</body>
Mejor solución
<span class="anchor" id="section1"></span>
<div class="section"></div>
<span class="anchor" id="section2"></span>
<div class="section"></div>
<span class="anchor" id="section3"></span>
<div class="section"></div>
<style>
.anchor{
display: block;
height: 115px; /*same height as header*/
margin-top: -115px; /*same height as header*/
visibility: hidden;
}
</style>
Para vincular a un elemento, y luego ''posicionar'' ese elemento a una distancia arbitraria de la parte superior de la página, usando CSS puro, tendría que usar padding-top , de esa manera el elemento todavía se coloca en la parte superior de la ventana , pero parece , visiblemente, estar ubicado a cierta distancia de la parte superior del puerto de visualización, por ejemplo:
<a href="#link1">Link one</a>
<a href="#link2">Link two</a>
<div id="link1">
The first.
</div>
<div id="link2">
The second.
</div>
CSS:
div {
/* just to force height, and window-scrolling to get to the elements.
Irrelevant to the demo, really */
margin-top: 1000px;
height: 1000px;
}
#link2 {
/* places the contents of the element 100px from the top of the view-port */
padding-top: 100px;
}
Para usar un enfoque simple de JavaScript:
function addMargin() {
window.scrollTo(0, window.pageYOffset - 100);
}
window.addEventListener(''hashchange'', addMargin);
Sé que esto es un poco tarde, pero encontré algo muy importante que poner en tu código si estás usando Scrollspy de Bootstrap. ( http://getbootstrap.com/javascript/#scrollspy )
Esto me estaba volviendo loco durante horas.
El desplazamiento del espía de desplazamiento DEBE coincidir con window.scrollY, de lo contrario correrá el riesgo de:
- Obteniendo un efecto de parpadeo extraño cuando se desplaza
- Descubrirás que cuando haces clic en los anclajes, aterrizarás en esa sección, pero scroll spy asumirá que eres una sección sobre él.
var body = $(''body'');
body.scrollspy({
''target'': ''#nav'',
''offset'': 100 //this must match the window.scrollY below or you''ll have a bad time mmkay
});
$(window).on("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
Si usa nombres explícitos de anclaje como,
<a name="sectionLink"></a>
<h1>Section<h1>
entonces en CSS, simplemente puedes configurar
A[name] {
padding-top:100px;
}
Esto funcionará siempre que las etiquetas de anclaje HREF no especifiquen también un atributo NAME
Solo tengo el mismo problema. Tengo un nav posited pixed y quiero que el angkor comience bajo el nav. La solución de window.addEventListener... no funciona para mí porque configuro mi página para que sea scroll-behavior:smooth para que configure el desplazamiento en lugar de desplazarse al angkor. setTimeout() funciona si el tiempo es suficiente para desplazarse hasta el final, pero todavía no se ve bien. así que mi solución fue agregar un div absoluto propuesto en el angkor, con height:[the height of the nav] e bottom:100% . en este caso, este div termina en la parte superior del elemento angkor, y comienza en la posición en la que deseas desplazarte a angkor. ahora todo lo que hago es establecer el enlace de Angkor a este div absoluto y el trabajo hecho :)
html,body{
margin:0;
padding:0;
scroll-behavior:smooth;
}
nav {
height:30px;
width:100%;
font-size:20pt;
text-align:center;
color:white;
background-color:black;
position:relative;
}
#my_nav{
position:fixed;
z-index:3;
}
#fixer_nav{
position:static;
}
#angkor{
position:absolute;
bottom:100%;
height:30px;
}
<nav id="my_nav"><a href="#angkor">fixed position nav<a/></nav>
<nav id="fixer_nav"></nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
</p>
<nav><div id="angkor"></div>The angkor</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
</p>
Una mejor solución:
<p style="position:relative;">
<a name="anchor" style="position:absolute; top:-100px;"></a>
I should be 100px below where I currently am!
</p>
Simplemente coloque la etiqueta <a> con el posicionamiento absoluto dentro de un objeto relativamente posicionado.
Funciona al ingresar a la página o mediante un cambio de hash dentro de la página.
prueba este código, ya tiene una animación suave cuando se hace clic en el enlace.
$(document).on(''click'', ''a[href^="#"]'', function (event) {
event.preventDefault();
$(''html, body'').animate({
scrollTop: $($.attr(this, ''href'')).offset().top - 100
}, 500);
});
<a href="#anchor">Click me!</a>
<div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div>
<p>I should be 100px below where I currently am!</p>
window.addEventListener("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
Esto permitirá que el navegador haga el trabajo de saltar al ancla para nosotros y luego usaremos esa posición para compensar.
EDIT 1:
Como señaló @erb, esto solo funciona si estás en la página mientras se cambia el hash. Entrar en la página con #something ya está en la URL no funciona con el código anterior. Aquí hay otra versión para manejar eso:
// The function actually applying the offset
function offsetAnchor() {
if(location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).
NOTA: Para usar jQuery, puede simplemente reemplazar window.addEventListener con $(window).on en los ejemplos. Gracias @Neon.
EDICION 2:
Como señalaron algunos, lo anterior fallará si hace clic en el mismo enlace de anclaje dos o más veces seguidas porque no hay hashchange evento de hashchange para forzar el desplazamiento.
Esta solución es una versión muy ligeramente modificada de la sugerencia de @Mave y utiliza los selectores de jQuery para simplificar
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on(''click'', ''a[href^="#"]'', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
JSFiddle para este ejemplo está here