javascript - elegant - plantilla divi wordpress gratis

jQuery-Desplaza el elemento a la mitad de la pantalla en lugar de a la parte superior con un enlace de anclaje

Question

Estoy construyendo un sitio de una página con una barra de navegación de posición fija que se desplaza suavemente a los diferentes elementos de la sección a través de enlaces de anclaje. El comportamiento predeterminado para desplazarse a un elemento es alinearlo con la parte superior de la ventana del navegador. En su lugar, quiero alinear el elemento con el centro de la pantalla.

Yo uso este marcado para la navegación:

<nav class="main-nav">
  <a href="#top">Top</a>
  <a href="#section-1">Section 1</a>
  <a href="#section-2">Section 2</a>
  <a href="#section-3">Section 3</a>
  <a href="#section-4">Section 4</a>
  <a href="#section-5">Section 5</a>
</nav>

Utilizo el complemento jQuery Smooth Scroll de kswedberg para suavizar el desplazamiento. Lo inicio así:

$(''.main-nav a'').smoothScroll({
  offset: 0,
  speed: 700
});

Quiero configurar el desplazamiento en ((window).height / 2) - (element height / 2) para que esté centrado verticalmente, pero necesito ayuda para averiguar cómo ejecutarlo correctamente.

Lo necesito para:

• Obtén la altura de la ventana y divídelo por dos.
• Obtén la altura del elemento y divídelo por dos.
• Resta lo primero de lo segundo.
• Si es posible, alinéelo con la parte superior como predeterminado si el elemento es más alto que la ventana

Dado que hay muchos enlaces de anclaje, asumo que debo verificar la altura del elemento en el que se hizo clic en los enlaces de anclaje o iniciar Smooth Scroll para cada enlace de anclaje.

¿Alguien sabe cómo hacer esto?

Answer 1

Aquí se explica cómo hacerlo con JQuery sin formato utilizando scrollTo ()

 $(''.main-nav a'').on(''click'', function(e) { 
  var el = $( e.target.getAttribute(''href'') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }
  var speed = 700;
  $(''html, body'').animate({scrollTop:offset}, speed);
});

Esta es una combinación del código de Straker y el código de esta pregunta: jQuery scrollTo - Center Div en Window Verticalmente

Answer 2

La API proporciona una manera de ejecutar un smoothScroll no enlazado a un elemento. Querrá ejecutar este método dentro de un evento onclick para las etiquetas de anclaje para que pueda tener acceso a su destino. Luego puede calcular lo que necesita para llegar a la posición deseada. Dado que el offset ahora es un desplazamiento absoluto en lugar de un desplazamiento relativo, deberá obtener la posición exacta para desplazarse.

$(''.main-nav a'').on(''click'', function(e) { 
  var el = $( e.target.getAttribute(''href'') );
  var elOffset = el.offset().top;
  var elHeight = el.height();
  var windowHeight = $(window).height();
  var offset;

  if (elHeight < windowHeight) {
    offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
  }
  else {
    offset = elOffset;
  }

  $.smoothScroll({ speed: 700 }, offset);
  return false;
});