jQuery-przewijanie elementu na środek ekranu zamiast na górę z linkiem kotwicy

Buduję jednostronicową witrynę ze stałym paskiem nawigacyjnym, który płynnie przewija się do różnych elementów sekcji za pomocą linków kotwiących. Domyślnym zachowaniem przewijania do elementu jest wyrównanie go do góry okna przeglądarki. Zamiast tego chcę wyrównać element do środka ekranu.

Używam tego znacznika do nawigacji: 

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

Używam wtyczki jQuery Smooth Scroll do wygładzania przewijania. Inicjuję to jak to: 

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

Chcę ustawić offset na ((window).height / 2) - (element height / 2) tak, aby był wyśrodkowany pionowo, ale potrzebuję pomocy, aby dowiedzieć się, jak go poprawnie wykonać.

I need it to:

  • uzyskaj wysokość okna i podziel je przez dwa
  • uzyskaj Wysokość elementu i podziel go przez dwa
  • Odejmij pierwsze od drugiego
  • jeśli to możliwe, ustaw go do góry, jak domyślnie, jeśli element jest wyższy niż okno

Ponieważ istnieje wiele linki zakotwiczenia zakładam, że albo muszę sprawdzić wysokość elementu, do którego link zakotwiczenia został kliknięty, albo zainicjować smoothScroll dla każdego łącza zakotwiczenia.

Czy ktoś wie jak to zrobić?
Author: Nils Kaspersson, 2013-08-09
Source

2 answers

API umożliwia wykonanie smoothScroll niezwiązanego z elementem. Będziesz chciał wykonać tę metodę wewnątrz zdarzenia onclick dla znaczników zakotwiczenia, aby mieć dostęp do jej celu. Następnie można obliczyć, co trzeba, aby dostać się do żądanej pozycji. Ponieważ offset jest teraz przesunięciem absolutnym zamiast przesunięciem względnym, musisz uzyskać dokładną pozycję do przewinięcia.

$('.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;
});
 31
Author: Steven Lambert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-09 17:39:50

Oto Jak to zrobić ze zwykłym JQuery używając 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);
});

Jest to kombinacja kodu strakera i kodu z tego pytania: jQuery scrollTo-Center Div w oknie pionowo

 30
Author: Santiago Angel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:20