Contabilización de un encabezado fijo con animate.scrolltop y (target) .offset(). Top;

Question

Esta debería ser una pregunta bastante básica, pero he dedicado la mayor parte de mi mañana a ello, y en este momento estoy a punto de arrojar la toalla. Ni siquiera tengo un poco de foo JS - pero he encontrado un trozo muy bien comentada de código que estoy esperando a utilizar para animar anclaje une es:

$(document).ready(function() { 
$('a[href*=#]').bind('click', function(e) { 
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump 

var target = $(this).attr("href"); //Get the target 

var scrollToPosition = $(target).offset().top; 

// perform animated scrolling by getting top-position of target-element and set it  as scroll target 
$('html, body').stop().animate({ scrollTop: scrollToPosition}, 600, function() { 
    location.hash = target; //attach the hash (#jumptarget) to the pageurl 
}); 

return false; 

}); 
}); 

que estoy tratando de conseguir que se 30px tierra sobre el desplazamiento() arriba -. me trató

$('html, body').stop().animate({ scrollTop: scrollToPosition -30}, 600,

que casi se trabaja - que va al lugar correcto, pero luego se recupera.

También he intentado

scrollTop: $(target).offset().top - 20 },

También he intentado

scrollTop: $(hash).offset().top + $('#access').outerHeight()

que no parece cambiar nada.

Parece que la respuesta podría estar aquí: JQuery page scroll issue with fixed header pero parece que no puedo conseguirlo.

Sé que esto es similar a otras preguntas, pero he examinado lo que pude encontrar y soy analfabeto lo suficiente como para no haber podido copiar/pegar nada que solucione el problema.

Estaría increíblemente agradecido por una solución.

Muchas gracias,

Martin

PS

Este otro trozo de código que encontré hace el trabajo pero es separar el hashtag a cabo, lo que hace que sea mayoría inútiles.

$(function(){ 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) { 
     var $target = $(this.hash); 
     $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
     if ($target.length) { 
      var targetOffset = $target.offset().top; 
      $('html,body').animate({scrollTop: targetOffset - 30}, 1000); 
      return false; 
     } 
    } 
    }); 
}); 

Answer 1

EDITADO: sólo tiene que detectar la altura de la cabecera fija y restar que a partir de la cual scrollToPosition que estaba haciendo correctamente. El problema es window.location.hash = "" + target; salta la página al principio del elemento con esa identificación. Entonces, si animas allí como lo hacías y luego cambias a ese hash, se "recuperará" como lo describiste. Esta es la primera forma en que podemos combatir esto:

// Get the height of the header 
var headerHeight = $("div#header").height(); 

// Attach the click event 
$('a[href*=#]').bind("click", function(e) { 
    e.preventDefault(); 

    var target = $(this).attr("href"); //Get the target 
    var scrollToPosition = $(target).offset().top - headerHeight; 

    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){ 
     window.location.hash = "" + target; 
     // This hash change will jump the page to the top of the div with the same id 
     // so we need to force the page to back to the end of the animation 
     $('html').animate({ 'scrollTop': scrollToPosition }, 0); 
    }); 

    $('body').append("called"); 
}); 

aquí es un nuevo jsFiddle para este primer método: http://jsfiddle.net/yjcRv/1/

hacer otras modificaciones: Una mejor manera de controlar los eventos de cambio de hash es use un complemento como jQuery Address. Con esto puedes utilizar tus eventos de intercambio mucho más.He aquí un ejemplo de uso:

// Get the height of the header 
var headerHeight = $("div#header").height(); 

$.address.change(function(evt){ 
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data 

    // If there's been some content requested go to it…else go to the top 
    if(evt["pathNames"][0]){ 
     var scrollToPosition = $(target).offset().top - headerHeight; 
     $('html').animate({ 'scrollTop': scrollToPosition }, 600); 
    }else{ 
     $('html').animate({ 'scrollTop': '0' }, 600); 
    } 

    return false; 
}); 

// Attach the click event 
$('a').bind("click", function(e) { 
    // Change the location 
    $.address.value($(this).attr("href")); 

    return false; 
}); 

ejemplo vivo aquí: http://www.vdotgood.com/stack/user3444.html

NOTA: No es necesario añadir el picadillo a sus enlaces de atributos href ahora. Aquí hay un enlace que puede orientar con un selector de jQuery:

<!-- This is correct --> 
<a href="/target" class="myclass">Target</a> 

<!-- These are incorrect --> 
<a href="/#/target" class="myclass">Target</a> 

<a href="#/target" class="myclass">Target</a> 

Para hacer referencia a este enlace que tendría que utilizar un selector como:

$("a.myclass").click(function(){ 
    $.address.value($(this).attr("href")); 
    return false; 
}); 

---

jQuery Dirección de hecho busque vínculos que tienen el atributo siguiente:

<a href="/target" rel="address:/target">Target</a> 

el rel atribuir aquí cont ains address: seguido de una url relativa definida por usted en este caso /target. Si usa esto, jQuery Address detectará el enlace y activará el evento de cambio de hash automáticamente.

Answer 2

Sé que esta es una pregunta antigua (tipo de) pero me encontré con un problema similar con un menú desplegable de navegación en un sitio web. Tenga en cuenta que este es un fragmento de código de desplazamiento suave, aunque podría hacerlo automáticamente cambiando la velocidad de la animación.

jQuery:

$('body').on('click','a[href^="#"]',function(event){ 
    event.preventDefault(); 
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0; 
    //change this number to create the additional off set   
    var customoffset = 75 
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500); 
}); 

he utilizado este trozo de código por un largo tiempo sin ningún problema. Lo único que no me gusta es que atrape CUALQUIER etiqueta #. Por lo tanto, en un complemento como el complemento Flexslider, donde la navegación usa #, los elimino manualmente del complemento.

Answer 3

He modificado el script original desde http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery. Funciona maravillas, pero no se puede establecer un retraso tal como es.

var headerHeight = $("header").height(); 


     $(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash, 
     $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - headerHeight 
     }, 1200, 'swing', function() { 
      window.location.hash = target ; 
     }); 
    }); 
}); 

Sí, soy un poco tarde, pero este problema me acaba de ocurrir ... Salud!