jQuery script desplazamiento uniforme a diferentes secciones con un desplazamiento diferente

Estoy utilizando un script de desplazamiento suave para mi sitio de una página. Se desplaza a cada ancla.jQuery script desplazamiento uniforme a diferentes secciones con un desplazamiento diferente

Debido al diseño, no puedo tener el broche de anclaje directamente en la parte superior de la página. Tuve que crear anclajes ocultos que están más arriba en la página, por lo que no se ajustan exactamente a la parte superior.

Aquí es el guión que estoy usando actualmente:

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ 
      scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top 
     }, 500); 
    }); 
});

Se me ha informado de que puedo hacer que el desplazamiento ocurra dentro de este guión. En lugar de tener estos pequeños anclajes ocultos en todas partes, simplemente puedo agregar algo al final de la parte superior para compensarlo por una cierta cantidad de píxeles. Sería la parte superior - 250

$('html,body').animate({ 
    scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250 
}, 500);

El problema es que esto haría el desplazamiento siempre ser 250 píxeles, necesito que sea variable, de forma que, por ejemplo, el div cartera puede estar anclado con un desplazamiento de 200 píxeles, pero el contacto div solo por 50px.

¿Alguien me puede ayudar a escribir algún tipo de selector en el script que me permita ajustar esta parte superior - [variable] en función de qué div se ancle?

Fuente

2012-08-09 Francesca

¿Has probado el fragmento de código? Debería funcionar dado que obtiene el desplazamiento del ancla y resta 250 de un valor dinámico. Para estar seguro, intente rodear su cálculo con corchetes. – Bojangles

¿puede proporcionar algún código de prueba simple en http://jsfiddle.net/? no estoy seguro de dónde está su 'div # contact' y' div # portfolio'. – Giberno

Hola, sí lo he intentado. Funciona, pero siempre se encuentra exactamente a 250px por encima del div, que no es lo que quiero. – Francesca

En realidad, no está dando una indicación sobre cuáles son las reglas para determinar el desplazamiento del valor del superior del ancla.

Por lo tanto, quizás lo más fácil sea introducir un atributo que puede usar para ajustar la compensación en su delimitador con nombre o cualquier elemento que desee desplazarse a la vista.

Por ejemplo, aquí hay un ancla nombrada con un nuevo atributo llamado data-section-offset y quiero offset por 20px.

<a id="myAnchor" data-section-offset="20">My Section</a>

En su manejador de clics puede sacar el valor de los atributos de la animación.

jQuery(document).ready(function($) { 

    $(".scroll").click(function(event) { 
     event.preventDefault();   
     var $anchor = $('#' + this.hash.substring(1)); 
     $('html,body').animate({ 
      scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset') 
     }, 500);   
    }); 
});

Aquí hay un fiddle para mostrar un ejemplo más.

Nota: JQuery tiene el método de datos por lo que el atributo podría ser tirado ya sea como este (como arriba)

$anchor.attr('data-section-offset')

o como este

$anchor.data('section-offset')

Como @Ben señaló HTML5 specification for custom data attributes es bastante útil >HTML 5 data- Attributes.

Fuente

2012-08-20 12:38:59

El uso de '

' y '' También su atributo personalizado romperá la validación de la página. Funcionará, pero quizás si desea utilizar un atributo personalizado, al menos debería usar el nuevo estándar HTML5 precediéndolo de 'data-'. – BenSwayne

@BenSwayne gracias por su comentario, debo admitir que no sabía acerca de la especificación de HTML5 para los atributos de datos personalizados. –

Antes que nada, no necesita utilizar la antigua convención <a name=. Consulte la página w3schools en los anclajes HTML anchors on w3schools. La mejor práctica ahora es vincular el elemento del contenedor con el id.

Así que si está enlazando a un div con algún contenido, use <div id="linkToMe">My content in here.</div> y <a href="#linkToMe">The link text</a>.

Esto, por supuesto, romperá el código anterior ya que está buscando elementos por nombre. Desea buscarlos por id (¡más rápido de todos modos!).

En mi página web tengo una barra de herramientas en la parte superior que a veces es position: fixed; así que cuando me desplazo quiero compensar la posición de desplazamiento para que no vaya debajo de la barra de herramientas en la parte superior de la página.

Esto es cómo lo hago:

function goToByScroll(id) { 
    //Find toolbar height 
    var pageOffset = 0, 
     hdr = $('#sub'), 
     tb = $('#sitemenu'); 
    if (hdr.css('position') == 'fixed') { pageOffset += hdr.height() } 
    if (tb.css('position') == 'fixed') { pageOffset += tb.height() } 

    //Scroll the document 
    $('html,body').animate({ scrollTop: $("#" + id).offset().top - pageOffset }, 'slow'); }

y luego cablear con jQuery:

$(".jumptoid").click(function (e) { 
    e.preventDefault(); 

    // Track in google analytics if you are using it. 
    _gaq.push(['_trackEvent', 'Jump to Id', e.currentTarget.host, this.href, 0]); 

    // Scroll to item location using jquery 
    goToByScroll(this.href.split('#')[1]); 

    // Push History in browser bar so the forward/back button works 
    window.location.hash = this.href.split('#')[1]; 

    return false; 
});

Esto alineará perfectamente la parte superior del elemento de destino con el fondo de mi cabecera/barra de herramientas si están fijadas en la posición o en la parte superior de la ventana del navegador si no es así.

En su caso, o bien desea cambiar la forma de calcular el desplazamiento (en lugar de mis hdr y tb elementos, puede hacer otras operaciones matemáticas o mirar otros elementos de la página) o puede usar el atributo personalizado como se sugiere por @chris moutray.

Si desea utilizar un atributo, use el estándar html5 propuesto para comenzar con data- para que pase la validación. Por ejemplo, 0mally luego use el código de @ chris para obtener ese atributo como $anchor.attr('data-scroll-offset').

Fuente

2012-08-20 19:48:29 BenSwayne

Hola gracias, investigaré esto y veré cómo funciona. La razón por la que no puedo enlazar con el contenedor div era simplemente porque esto deja el contenedor justo en la parte superior (cuando quería que se compensara un poco) así que si esto funciona, estaré muy feliz :) Gracias por su tiempo. – Francesca

@FrancescaHaselden háganos saber si su problema se resuelve mediante la aceptación de una respuesta, de lo contrario, considere agregar un comentario si necesita más aclaraciones y ¡me complacerá agregar un poco más de información! – BenSwayne

jQuery script desplazamiento uniforme a diferentes secciones con un desplazamiento diferente

Respuesta

Cuestiones relacionadas