Smooth scroll

pytanie zadane 28 czerwca 2019 w JavaScript przez Mikołaj_627 Początkujący (480 p.)

Cześć,

Niedawno na podstawie poradnika zrobiłem efekt smooth scroll na swojej stronie ale mam problem ponieważ jeśli chodzi o przewijanie z góry na dół wszystko działa poprawnie, jednak kiedy przewijam z dołu do góry to zamiast przenieść mnie do odpowiedniej sekcji przenosi mnie na samą górę, oto poradnik a to kod

function smoothScroll(target, duration) {
  var target = document.querySelector(target);
  var targetPosition = target.getBoundingClientRect().top;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t + b;
    t--;
    return (-c / 2) * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);

  console.log(startPosition);
}

let btn = document.querySelectorAll(".service-btn");
let buttons = btn.length;
let footerbtn = document.querySelector(".footer-btn");

for (let i = 0; i < buttons; i++) {
  btn[i].addEventListener("click", function() {
    smoothScroll(".services", 1000);
  });
}

footerbtn.addEventListener("click", function() {
  smoothScroll(".services", 1000);
});

1 odpowiedź

odpowiedź 28 czerwca 2019 przez Chess Szeryf (76,710 p.)
edycja 28 czerwca 2019 przez Chess

Ustaw licznik odpowiedzialny za to, w którym miejscu się znajdujesz. Gdy jesteś na samym dole, licznik zapewne jest ustawiony np. na 0 - oznacza, to że gdy naciśniesz na coś, to wtedy jesteś przenoszony na samą górę. Po ustawieniu licznika na odpowiednią wartość, powinieneś być przeniesiony z dołu do góry zgodnie z wartościami w liczniku.

Np. poglądowo mogłoby to wyglądać tak: 0 - góra, 1 - środek, 2 - dół.

Jeśli jesteś na samym dole (2), to licznik widzi, że jesteś na tej sekcji. Jeśli naciśniesz na sekcję numer 0, to wtedy powienien przenieść Cię do góry. Teraz jest tak chyba, że gdy zjedziesz na sam dół (2), to automatyczenia zmienia się wartość licznika na 0 i później jak klikasz, to przenosi Cię do sekcji (0) zamiast np. do sekcji (1).

Licznik - mam na myśli wartość pozycji scroll'a w uproszczeniu.

<body style="background: darkolivegreen; margin: 0; padding: 0;">

<div style="position: fixed; right: 0;">
  <button id="to_section">to_section: </button>
  <input type="text" id="section_x"/>
</div>

<div id="section1">s1</div>
<div id="section2" style="margin-top: 1000px;">s2</div>
<div id="section3" style="margin-top: 2450px;">s3</div>

document.getElementById('to_section').addEventListener('click', function() {
 
  if(document.getElementById(document.getElementById('section_x').value) != undefined) {

    let target_position = document.getElementById(document.getElementById('section_x').value).getBoundingClientRect().top;
    let start_position = window.pageYOffset;
    let distance = target_position - start_position;
   
    window.scrollTo({
      top: distance,
      behavior: 'smooth'
    });
  
  }

}, false);