jQuery scorrimento per ancorare (determinata quantità meno di pixel)

Question

Sto usando il seguente codice per passare ai punti di ancoraggio con 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 []; 
    } 

}); 

Esiste un modo per farlo scorrere fino a che l'ancora, ma meno un certo lasso di pixel? (nel mio caso lo voglio andare -92px)

Grazie per qualsiasi aiuto.

Answer 1

Ho dovuto risolvere da solo questo problema. È necessario regolare l'offset in base alla quantità di pixel che si desidera scorrere. Nel mio caso, avevo bisogno che fosse 50 pixel più in alto nella pagina. Quindi, ho sottratto 50 da targetOffset.

Ora, la parte del codice che sta per essere traballante per te è location.hash - questo sta dicendo al browser di impostare la sua posizione in un punto specifico. In tutti i casi, questa è una stringa contenente l'ID a cui si è appena passati. Quindi, sarebbe qualcosa come "#foo". Devi mantenerlo, quindi lo lasceremo.

Tuttavia, per impedire al browser di "saltare" quando viene impostato location.hash (un'azione browser predefinita), è semplicemente necessario impedire l'azione predefinita. Quindi, passa il tuo evento 'e' attraverso la funzione di completamento nella funzione di animazione. Quindi chiama semplicemente e.preventDefault(). Dovrai assicurarti che il browser stia effettivamente chiamando un evento, altrimenti si verificherà un errore. Quindi, un if-test risolve il problema.

Fatto. Ecco il codice pezzo rivisto:

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

Questo è quello che io uso:

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

... dove 50 è il numero di pixel per aggiungere/sottrarre.

Answer 3

Non è stato possibile utilizzare la soluzione di Jonathan Savage in quanto non è stato possibile passare una richiamata di un evento in animate() senza errori. Ho avuto questo problema oggi e trovato una soluzione semplice:

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

Sottrarre compensato dalla variabile targetOffset il pixel, quindi assegnare location.hash a quella variabile. Arresta la pagina saltando quando si scorre verso l'hash di destinazione.

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

Questo lavoro codice per me in qualsiasi ancoraggio link nel mio sito rispetto "150px" altezza per il menu fisso sulla parte superiore.

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

Questa è un'implementazione jQuery che uso che si basa su una soluzione di Никита Андрейчук. La variabile di regolazione dei pixel può essere impostata dinamicamente in questo modo, sebbene sia codificata in questo esempio.

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

Ecco cosa uso. Imposta l'offset su ciò che ti serve.

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