jQuery przewijania, aby zakotwiczyć (minus określoną ilość pikseli)

Question

używam następujący kod, aby przewinąć do punktów z jQuery:

$(document).ready(function() { 
    function filterPath(string) { 
    return string 
    .replace(/^\//,'') 
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
    .replace(/\/$/,''); 
    } 
    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    $('a[href*=#]').each(function() { 
    var thisPath = filterPath(this.pathname) || locationPath; 
    if ( locationPath == thisPath 
    && (location.hostname == this.hostname || !this.hostname) 
    && this.hash.replace(/#/,'')) { 
     var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = target; 
      }); 
     }); 
     } 
    } 
    }); 

    // use the first element that is "scrollable" 
    function scrollableElement(els) { 
    for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
     var el = arguments[i], 
      $scrollElement = $(el); 
     if ($scrollElement.scrollTop()> 0) { 
     return el; 
     } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
     } 
    } 
    return []; 
    } 

}); 

Czy mimo to, aby przewinąć do tej kotwicy, ale minus określoną ilość pikseli? (w moim przypadku chcę go -92px)

Dzięki za pomoc.

Answer 1

Po prostu musiałem rozwiązać ten problem sam. Musisz dostosować przesunięcie o liczbę pikseli, które chcesz przewinąćTo. W moim przypadku potrzebowałem, aby był on o 50 pikseli wyższy na stronie. Więc odjąłem 50 od targetOffset.

Teraz część kodu, która rzuca ci chybotanie, to location.hash - mówi przeglądarce, aby ustawiła swoją lokalizację w określonym miejscu. We wszystkich przypadkach jest to ciąg zawierający identyfikator, który właśnie przewinąłeś. Tak więc byłoby to coś w rodzaju "#foo". Musisz to utrzymać, więc opuścimy to.

Jednak, aby uniemożliwić przeglądarce "przeskakiwanie" po ustawieniu pliku location.hash (domyślna czynność przeglądarki), wystarczy zapobiec domyślnej akcji. Przekaż wydarzenie "e" przez funkcję uzupełniania w funkcji animacji. Następnie po prostu wywołaj e.preventDefault(). Musisz się upewnić, że przeglądarka faktycznie wywołuje zdarzenie, w przeciwnym razie wystąpi błąd. Tak więc, test if naprawia to.

Gotowe. Oto poprawiony kod fragment:

if (target) { 
    var targetOffset = $target.offset().top - 50; 
    $(this).click(function(event) { 
     if(event != 'undefined') { 
      event.preventDefault();} 
     $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) { 
      e.preventDefault(); 
      location.hash = target; 
     }); 
    }); 
    } 

Answer 2

To co mam użyć:

function scrollToDiv(element){ 
    element = element.replace("link", ""); 
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow'); 
}; 

... gdzie 50 to liczba pikseli, aby dodać/odjąć.

Answer 3

Nie mogłem użyć rozwiązania Jonathana Savage'a, ponieważ nie mogłem przekazać wywołania zwrotnego zdarzenia do animacji() bez błędu. Miałem ten problem dzisiaj i znaleźli proste rozwiązanie:

 var $target = $(this.hash), target = this.hash; 
     if (target) { 
     var targetOffset = $target.offset().top - 92; 
     $(this).click(function(event) { 
      event.preventDefault(); 
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
      location.hash = targetOffset; 
      }); 
     }); 

Odejmij swój piksel odsunięcia ze zmiennej targetOffset, a następnie przypisać location.hash do tej zmiennej. Zatrzymuje przeskakiwanie strony podczas przewijania do docelowego skrótu.

Answer 4

Lol)

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

Answer 5

Ta praca kod dla mnie w każdej kotwicy łącza w moim miejscu względem "150px" height dla ustalić menu na górze.

<!-- SMOOTH SCROLL --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(function() { 
    $('a[href*=#]:not([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) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top-150 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 
<!-- End of SMOOTH SCROLL --> 

Answer 6

Jest to realizacja jQuery którego używam, który został oparty na rozwiązanie Никита Андрейчук użytkownika. W ten sposób zmienna dopasowująca piksele może być ustawiona dynamicznie, chociaż w tym przykładzie jest zakodowana na stałe.

$('a').each(function() { 
    var pixels = 145; 
    var name = $(this).attr('name'); 
    if (typeof name != 'undefined') { 
     $(this).css({ 
      'display' : 'block', 
      'height'  : pixels + 'px', 
      'margin-top' : '-' + pixels + 'px', 
      'visibility' : 'hidden' 
     }); 
    } 
}); 

Answer 7

Oto, czego używam. Ustaw offset do tego, czego potrzebujesz.

$('a[href^="#"]').click(function(e) { 
    e.preventDefault(); 
    $(window).stop(true).scrollTo(this.hash {duration:1000,interrupt:true,offset: -50}); 
});