1

Mi pregunta es si se puede hacer un a href a un id pero que te mande 5px mas arriba o 10px por ejemplo:

<a href = "#nosotros"></a>
<div id = "nosotros"></div>

Que se vea de esta manera

introducir la descripción de la imagen aquí

y no pegado arriba como aquí introducir la descripción de la imagen aquí

3 respuestas 3

3

Creo que es posible hacerlo con jQuery. Incluso lo puedes animar un poco. Con estos elementos:

Le agregaría algo así:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

<div id='hola'><h2>Hola</h2></div>
<a data-href='#hola' href='#'>Ir a hola</a>

<script>
    $(function(){
        $('a').click(function(e){
            e.preventDefault();
            var div = $(this).data('href');
            var y = $(div).offset().top - 50;
            $('body,html').stop(true,true).animate({                                
                scrollTop: y
            },1000);
        });
    });

</script>

Espero que te sirva.

1
  • 1
    Muchas Gracias amigo sirvio 100% (Y) EXCELENTE :D el 7 mar. 2017 a las 18:29
1

La propiedad que te puede servir es padding.

Ejemplo CSS

.big {
  height: 600px;
}

#nosotros {
  padding-top: 10px;
}
<a href="#nosotros">Nosotros</a>
<div class="big"></div>
<div id="nosotros">
  <h1>Nosotros</h1>
</div>
<div class="big"></div>

Sin embargo, no es viable ya que si quieres darle un margen superior de 50px, tendrías que darle un padding-top: 50px lo cual se vería horrible. Lo mejor sería usar JavaScript para este caso.

Ejemplo JS

let anchors = document.querySelectorAll('[anchor]');
[].forEach.call(anchors, function(anchor) {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    let el = document.querySelector(this.getAttribute('href'));
    // 50px más abajo
    let top = el.getBoundingClientRect().top + window.scrollY - 50;
    window.scrollTo(0, top);
  });
});
.big {
  height: 600px;
}
<a anchor href="#nosotros">Nosotros</a>
<div class="big"></div>
<div id="nosotros">
  <h1>Nosotros</h1>
</div>
<div class="big"></div>

2
  • Lo tuyo lo soluciona pero si pierde un poco de estetica la página de todos modos gracias :) me diste una idea de como hacerlo el 7 mar. 2017 a las 18:26
  • @SergioCamilo ¿A qué te refieres con perder la estética si es código JavaScript?
    – gugadev
    el 7 mar. 2017 a las 18:30
-1

Claro, coloca este estilo

<style>
  a{
   margin-top: 10px;
   display: block;
  }
</style>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.