Zliczanie ustalonego nagłówka za pomocą animate.scrolltop i (target) .offset(). Top;

Question

To powinno być dość podstawowe pytanie, ale rzuciłem większość mojego poranka na to i już jestem blisko rzucania ręcznikiem. Nie mam jeszcze trochę js foo - ale znalazłem ładnie skomentował fragment kodu, który mam nadzieję wykorzystać do animowania kotwica linki to:

$(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; 

}); 
}); 

Próbuję zmusić go do 30px ziemia nad offsetu() szczycie. - próbowałem

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

które prawie działa - to idzie we właściwym miejscu, ale potem odbija z powrotem.

Próbowałem zostały również

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

Próbowałem zostały również

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

co nie wydaje się, aby cokolwiek zmienić.

Wygląda na to, że odpowiedź może być tutaj: JQuery page scroll issue with fixed header, ale po prostu nie mogę tego uzyskać.

Wiem, że to jest podobne do innych pytań - ale przeszedłem to, co mogłem znaleźć, i jestem analfabetą, że nie mogłem skopiować ani wkleić niczego, co rozwiązało problem.

Byłbym niezwykle wdzięczny za rozwiązanie.

Dziękujemy,

Martin

PS

Ten drugi fragment kodu znalazłem działa ale to stripping hashtag na zewnątrz, co sprawia, że ​​w większości bezużyteczne.

$(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

edycja: Trzeba tylko wykrywa wysokość ustalonej nagłówka i odejmować, że z scrollToPosition które robiły poprawnie. Problem polega na tym, że window.location.hash = "" + target; przeskakuje stronę na początek elementu o tym identyfikatorze. Więc jeśli animujesz się tam, tak jak robiłeś, a następnie zmieniasz ten skrót, to "odbijamy się", tak jak opisałeś. Oto pierwszy sposób możemy zwalczać to:

// 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"); 
}); 

Oto nowy jsfiddle dla tej pierwszej metody: http://jsfiddle.net/yjcRv/1/

INNE EDIT: Jeszcze lepszym sposobem na kontrolowanie zdarzenia zmian mieszania jest do użyj wtyczki takiej jak jQuery Address. Dzięki temu możesz znacznie częściej wykorzystywać wydarzenia hashchange.Oto przykład użycia:

// 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; 
}); 

żywo przykład tutaj: http://www.vdotgood.com/stack/user3444.html

UWAGA: Nie należy dodać skrót do linków atrybutu href teraz. Oto link, który można kierować z selektora 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> 

Aby kierować ten link byłoby użyć selektora takiego:

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

---

jQuery Adres ma w rzeczywistości wyglądać za linki które mają następujący atrybut:

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

Atrybut rel tutaj cont ains address:, po którym następuje względny URL zdefiniowany przez Ciebie w tym przypadku /target. Jeśli użyjesz tego, adres jQuery wykryje połączenie i automatycznie uruchomi zmianę hash.

Answer 2

Wiem, że to stare pytanie (rodzaj), ale napotkałem podobny problem ze stałą rozwijaną nawigacją na stronie internetowej. Zauważ, że jest to płynny fragment kodu przewijania, chociaż możesz łatwo zrobić to automatycznie, zmieniając prędkość animacji.

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); 
}); 

Użyłem ten kawałek kodu przez długi czas bez żadnych problemów. Jedyne, co mi się nie podoba, to zdobędzie DOWOLNY znacznik #. Tak więc w pluginach takich jak wtyczka Flexslider, w której nawigacja używa #, ręcznie usuwam je z wtyczki.

Answer 3

Mam zmodyfikowany oryginalny skrypt z http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery. Działa cuda, ale nie można ustawić opóźnienia.

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 ; 
     }); 
    }); 
}); 

Tak, jestem trochę późno, ale ten problem właśnie przyszło mi do głowy ... Cheers!