JavaScript w przeglądarce (nie jQuery…) przewiń do górnej animacji

222

Szukam prostej animacji „przewiń do góry” w przeglądarce, którą mogę zastosować do linku. Nie chcę wymagać biblioteki JS, takiej jak jQuery / Moo itp.

// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);

Jestem idealnym przypadkiem dla kogoś, kto powinien nauczyć się JS w 100% przed skokiem do biblioteki. :(

javascript Heather Hins
źródło

78

+1 za brak chęci korzystania z jQuery, z ważnego powodu :) Aby uzyskać inspirację, możesz zajrzeć do kodu źródłowego tych bibliotek, np . Jquery-1.7.1.js .

Rob W

1

Zobacz tutaj: stackoverflow.com/questions/1144805/…

Oyeme

10

@seand JavaScript to nie jQuery, ale jQuery to JavaScript. Jeśli ktoś (taki jak OP) chce nauczyć się JavaScript, nie powinien dotykać żadnych rozdętych bibliotek, chyba że wpadnie na pomysł, jak napisać ten sam kod w JavaScript.

Rob W

3

@RobW przy użyciu biblioteki takiej jak jQuery pomaga pozbyć się różnic między przeglądarkami, dlatego uważam, że ma to kluczowe znaczenie dla rozwoju stron internetowych; nie powinieneś znać tych różnic, jeśli istnieje doskonale dobra implementacja i jest ona dostępna bezpłatnie

i

6

@seand i tak produkujemy kiepskie kodery. Nie rozumieją języka, ale mogą tworzyć nieograniczoną ilość kodu jQuery, ponieważ go znają. Prowadzi to do włamań, takich jak przechowywanie wszystkiego w DOM (ponieważ czasami nawet nie wiedzą, co to jest zmienna, inna niż var something = $(...)), odtwarzanie gazillionu obiektów w każdej funkcji (znają zmienne, ale nie wiedzą o tym var veryBigObject = {...}przy kilkuset właściwościach w na górze tej funkcji będzie zabijanie wydajności). I bardzo często nawet nie wiedzą, że nazwa języka to Javascript, a nie jQuery.

Killah,

139

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Próbny:

function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop == to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}

<p>Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.  Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
</p>
<button id=scrollme type="button">To the top</button>

Rozwiń fragment kodu

TimWolla
źródło

11

document.documentElementzamiast document.body(chyba że ustawisz CSS:) body{height:100%;}. Działające demo przy użyciu tej koncepcji: jsfiddle.net/S5ALP/1

Rob W

7

@RobW Twój dodatek nie działa tutaj w Google Chrome @ Ubuntu Linux

TimWolla

2

robi to w Firefoksie 9.0, także Ubuntu :). Twój kod zawiódł w Firefoksie, ale działał w Chrome, mój kod zawiódł w Chrome, ale działał w FF.

Rob W

2

To powinno byćif (duration <= 0) return;

Jon Koops

4

Zmodyfikowanie go w celu użycia top.window.scroll(0, value)zamiast element.scrollTop = valuespowodowało, że działa zarówno w Chrome, jak i Firefox (Ubuntu). :)

Shomz,

113

wygląda na to, że jest już wiele rozwiązań. w każdym razie, oto kolejny, wykorzystuje równania łagodzące.

// first add raf shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

// main function
function scrollToY(scrollTargetY, speed, easing) {
    // scrollTargetY: the target scrollY property of the window
    // speed: time in pixels per second
    // easing: easing equation to use

    var scrollY = window.scrollY || document.documentElement.scrollTop,
        scrollTargetY = scrollTargetY || 0,
        speed = speed || 2000,
        easing = easing || 'easeOutSine',
        currentTime = 0;

    // min time .1, max time .8 seconds
    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
    var easingEquations = {
            easeOutSine: function (pos) {
                return Math.sin(pos * (Math.PI / 2));
            },
            easeInOutSine: function (pos) {
                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
            },
            easeInOutQuint: function (pos) {
                if ((pos /= 0.5) < 1) {
                    return 0.5 * Math.pow(pos, 5);
                }
                return 0.5 * (Math.pow((pos - 2), 5) + 2);
            }
        };

    // add animation loop
    function tick() {
        currentTime += 1 / 60;

        var p = currentTime / time;
        var t = easingEquations[easing](p);

        if (p < 1) {
            requestAnimFrame(tick);

            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
        } else {
            console.log('scroll done');
            window.scrollTo(0, scrollTargetY);
        }
    }

    // call it once to get started
    tick();
}

// scroll it!
scrollToY(0, 1500, 'easeInOutQuint');

shunryu111
źródło

10

Cieszę się, że ktoś używarequestAnimationFrame

Lucas

4

Należy głosować i wybrać jako odpowiedź. To jedyny, który działa w różnych przeglądarkach

wlingke,

requestAnimationFramenie jest kompatybilny ze wszystkimi przeglądarkami, niektóre telefony komórkowe, więc nie jest to rozwiązanie dynamiczne, patrz: developer.mozilla.org/en-US/docs/Web/API/window/…

SUB-HDR

1

@ SUB-HDR u góry fragmentu znajduje się podkładka, requestAnimationFramektóra powinna zająć się każdą niezgodnością przeglądarki

shunryu111

Animacje stają się bardzo opóźnione, gdy strona ma sekcję z dużą ilością obrazów w przeglądarce Firefox stackoverflow.com/questions/56396100/…

user3476614

79

window.scroll({top: 0, left: 0, behavior: 'smooth' });

Dostałem to z artykułu o płynnym przewijaniu .

W razie potrzeby dostępnych jest kilka wypełniaczy .

Mihai Răducanu
źródło

4

Prawie zaniżone, ponieważ myślałem, że to rozwiązanie jQuery. Ten artykuł jest myląco podzielony na kategorie! Chciałem też zaznaczyć, że scrollIntoView({behavior: 'smooth'})istnieje i mogę zrobić to, czego ludzie potrzebują w przypadku tego rodzaju problemu.

Brendan

1

To powoduje błąd w najnowszym ChromeUncaught TypeError: Failed to execute 'scroll' on 'Window': No function was found that matched the signature provided.

rorymorris89,

1

@Sgnl może potwierdzić, że zostało to naprawione. Stare dobre aktualizacje Chrome

psują

4

Nie wiem, dlaczego to nie ma więcej głosów, zwykłe przewijanie do góry bez 100000 linii kodu! Dziękuję Ci!

Smokey Dawson,

4

Ta odpowiedź musi być oznaczona jako zaakceptowana. Wbudowane podejście bez użycia niestandardowych funkcji przejścia, dlaczego nie !? Dziękuję Ci!

Sagar

70

Zmodyfikowałem odpowiedź TimWolli, aby zastosować kwadratowe łagodzenie wejścia-wyjścia (trochę płynniej :). Oto przykład w akcji: na jsFiddle . Funkcje łagodzenia są dostępne tutaj: Funkcje łagodzenia Roberta Pennera

document.getElementsByTagName('button')[0].onclick = function () {
    scrollTo(document.body, 0, 1250);   
}

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        increment = 20;

    var animateScroll = function(elapsedTime) {        
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);                        
        element.scrollTop = position; 
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

function easeInOut(currentTime, start, change, duration) {
    currentTime /= duration / 2;
    if (currentTime < 1) {
        return change / 2 * currentTime * currentTime + start;
    }
    currentTime -= 1;
    return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}

akai
źródło

5

Twój kod nie działa w Firefoksie. Czy jest na to rozwiązanie?

Milos,

2

@ Milos Wystarczy użyć „scrollTo (document.documentElement, 0, 1250);” zamiast „scrollTo (document.body, 0, 1250);” i powinien działać zarówno w przeglądarce Firefox, jak i Chrome.

Daniel

Dlaczego korzystasz z matematyki? Bez matematyki działa demo

bCliks

2

@Daniel document. documentElementnie działa w Chrome.

przysięgli

@bCliks, to metoda łagodząca

Clayton Graul

27

Bez kodu JQuery, mam nadzieję, że ci to pomoże.

function TopscrollTo() {
if(window.scrollY!=0)
{
    setTimeout(function() {
       window.scrollTo(0,window.scrollY-30);
        TopscrollTo();
    }, 100);
   }
}

wywołaj tę funkcję TopscrollTo () na zdarzeniu kliknięcia przycisku lub na dowolnym innym żądanym elemencie / zdarzeniu.

Vishal Patel
źródło

19

Zmodyfikowałem kod @TimWolla, aby dodać więcej opcji i kilka funkcji ruchu. Dodano także obsługę crossbrowser z document.body.scrollTop i document.documentElement.scrollTop

// scroll to top
scrollTo(0, 1000);

// Element to move, time in ms to animate
function scrollTo(element, duration) {
    var e = document.documentElement;
    if(e.scrollTop===0){
        var t = e.scrollTop;
        ++e.scrollTop;
        e = t+1===e.scrollTop--?e:document.body;
    }
    scrollToC(e, e.scrollTop, element, duration);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if(typeof from === "object")from=from.offsetTop;
    if(typeof to === "object")to=to.offsetTop;

    scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
    if (t01 < 0 || t01 > 1 || speed<= 0) {
        element.scrollTop = xTo;
        return;
    }
    element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
    t01 += speed * step;

    setTimeout(function() {
        scrollToX(element, xFrom, xTo, t01, speed, step, motion);
    }, step);
}
function easeOutCuaic(t){
    t--;
    return t*t*t+1;
}

http://jsfiddle.net/forestrf/tPQSv/

Wersja skrócona: http://jsfiddle.net/forestrf/tPQSv/139/

// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){
    t--;
    return t*t*t+1;
}

Forestrf
źródło

A po co 1 / durationpierwszy raz wywołujesz scrollToX?

Jessica

t01 to czas, który jest zwiększany od 0 do 1. Jeśli osiągnie 1, croll się kończy. Zrobiłem to 2 lata temu, nie pamiętam wszystkiego, przepraszam.

Forestrf

11

Tu jest rzeczywiście czysty sposób JavaScript, żeby to osiągnąć bez użycia setTimeoutlub requestAnimationFrameczy jQuery.

Krótko mówiąc, znajdź element scrollView, do którego chcesz przewinąć, i użyj scrollIntoView

el.scrollIntoView({behavior:"smooth"});

Oto plunkr .

Jon
źródło

Najlepsza odpowiedź: jedna linia kodu, najkrótsza i skuteczna;)

Jacopo Pace

1

Pamiętaj, że przekazanie scrollIntoViewOptionnie obsługuje wielu przeglądarek. developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

WebWanderer

9

Na podstawie tej odpowiedzi :

function scroll(y, duration) {

    var initialY = document.documentElement.scrollTop || document.body.scrollTop;
    var baseY = (initialY + y) * 0.5;
    var difference = initialY - baseY;
    var startTime = performance.now();

    function step() {
        var normalizedTime = (performance.now() - startTime) / duration;
        if (normalizedTime > 1) normalizedTime = 1;

        window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
        if (normalizedTime < 1) window.requestAnimationFrame(step);
    }
    window.requestAnimationFrame(step);
}

Powinno to umożliwić płynne przewijanie (funkcja cosinus) z dowolnego miejsca do określonego „y”.

Raslanove
źródło

9

Nikt nie wspomniał o zachowaniu przewijania właściwości CSS

CSS

html {
  scroll-behavior: smooth;
}

JS

window.scrollTo(0,0)

Fangxing
źródło

Działa to niesamowicie! Nie jest obsługiwane we wszystkich przeglądarkach, ale jest w porządku, ponieważ ładnie się wycofuje.

Swimburger

Jezu, gdzie to było przez całe moje życie?

Mitya

8

KLASA SCROLLER PURE JAVASCRIPT

To stare pytanie, ale pomyślałem, że mogę odpowiedzieć na kilka fantazyjnych rzeczy i więcej opcji do zabawy, jeśli chcesz mieć nieco większą kontrolę nad animacją.

Przeglądarka

Rozwiązanie gotowe do kopiowania / wklejania (potrzebujesz tylko CSS i JS)

3 tryby animacji: [„normal” | „linear” | false]

Dostosuj swoją animację za pomocą dostępnych ustawień - spraw, aby była szybka lub płynna

Kliknij dwukrotnie, aby pominąć animację

Każde następne kliknięcie zwiększa prędkość początkową

Zatrzymaj animację przewijania, przeciągając drążek w dół paska przewijania

Zatrzymaj przewijanie animacji kółkiem myszy w dół

Animowany przycisk zanikania przy przewijaniu

Oto czysta klasa JS, która zajmie się przewijaniem za Ciebie:

ZOBACZ DEMO W CODEPEN LUB PRZEJDŹ DO DOLNY I URUCHOM ZBIORNIK

// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "linear", // [false|normal|linear] - for false no aditional settings are needed

  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps per loop the slower animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 30, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
};


// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();

SKRIPT PEŁNEJ KLASY + PRZYKŁAD UŻYCIA:

// PURE JAVASCRIPT (OOP)

function Scroller(options) {
  this.options = options;
  this.button = null;
  this.stop = false;
}

Scroller.prototype.constructor = Scroller;

Scroller.prototype.createButton = function() {

  this.button = document.createElement('button');
  this.button.classList.add('scroll-button');
  this.button.classList.add('scroll-button--hidden');
  this.button.textContent = "^";
  document.body.appendChild(this.button);
}

Scroller.prototype.init = function() {
  this.createButton();
  this.checkPosition();
  this.click();
  this.stopListener();
}

Scroller.prototype.scroll = function() {
  if (this.options.animate == false || this.options.animate == "false") {
    this.scrollNoAnimate();
    return;
  }
  if (this.options.animate == "normal") {
    this.scrollAnimate();
    return;
  }
  if (this.options.animate == "linear") {
    this.scrollAnimateLinear();
    return;
  }
}
Scroller.prototype.scrollNoAnimate = function() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
Scroller.prototype.scrollAnimate = function() {
  if (this.scrollTop() > 0 && this.stop == false) {
    setTimeout(function() {
      this.scrollAnimate();
      window.scrollBy(0, (-Math.abs(this.scrollTop()) / this.options.normal['steps']));
    }.bind(this), (this.options.normal['ms']));
  }
}
Scroller.prototype.scrollAnimateLinear = function() {
  if (this.scrollTop() > 0 && this.stop == false) {
    setTimeout(function() {
      this.scrollAnimateLinear();
      window.scrollBy(0, -Math.abs(this.options.linear['px']));
    }.bind(this), this.options.linear['ms']);
  }
}

Scroller.prototype.click = function() {

  this.button.addEventListener("click", function(e) {
    e.stopPropagation();
    this.scroll();
  }.bind(this), false);

  this.button.addEventListener("dblclick", function(e) {
    e.stopPropagation();
    this.scrollNoAnimate();
  }.bind(this), false);

}

Scroller.prototype.hide = function() {
  this.button.classList.add("scroll-button--hidden");
}

Scroller.prototype.show = function() {
  this.button.classList.remove("scroll-button--hidden");
}

Scroller.prototype.checkPosition = function() {
  window.addEventListener("scroll", function(e) {
    if (this.scrollTop() > this.options.showButtonAfter) {
      this.show();
    } else {
      this.hide();
    }
  }.bind(this), false);
}

Scroller.prototype.stopListener = function() {

  // stop animation on slider drag
  var position = this.scrollTop();
  window.addEventListener("scroll", function(e) {
    if (this.scrollTop() > position) {
      this.stopTimeout(200);
    } else {
      //...
    }
    position = this.scrollTop();
  }.bind(this, position), false);

  // stop animation on wheel scroll down
  window.addEventListener("wheel", function(e) {
    if (e.deltaY > 0) this.stopTimeout(200);
  }.bind(this), false);
}

Scroller.prototype.stopTimeout = function(ms) {
  this.stop = true;
  // console.log(this.stop); //
  setTimeout(function() {
    this.stop = false;
    console.log(this.stop); //
  }.bind(this), ms);
}

Scroller.prototype.scrollTop = function() {
  var curentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  return curentScrollTop;
}



// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed

  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps per loop the slower animation gets
    'ms': 10 // the less ms the quicker your animation gets
  },
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 30, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  },
};
// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();

/* CSS */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  line-height: 2rem;
  height: 100%;
  position: relative;
  padding: 0 25%;
}
.scroll-button {
  font-size: 1.2rem;
  line-height: 2rem;
  padding: 10px;
  width: 50px;
  height: 50px;
  background: black;
  color: white;
  border-radius: 50%;
  position: fixed;
  right: 20px;
  bottom: 20px;
  visibility: visible;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: pointer;
  transition: all 1.2s;
  -webkit-transition: all 1.2s;
  -moz-transition: all 1.2s;
  -ms-transition: all 1.2s;
  -o-transition: all 1.2s;
}
.scroll-button:hover {
  filter: alpha(opacity=100);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.scroll-button--hidden {
  filter: alpha(opacity=0);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}

<!-- HTML -->

<h1>Scroll down by 200px for button to appear</h1>
<ul>
  <li>Cross-browser</li>
  <li>Copy/Paste solution</li>
  <li>3 animate modes: <b>["normal"|"linear"|false]</b></li>
  <li>Customize your aniamtion with aveilable settings - make it snapy or fluent</li>
  <li>Double click to skip animation</li>
  <li>Every next single click adds initial speed</li>
  <li>Stop scroll animation by draging down the scroll bar</li>
  <li>Stop scroll animation by mouse wheel down</li>
  <li>Animated button fade-in-out on scroll</li>
</ul>

<br />
<br />
<pre>
// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, // show button after scroling down this amount of px
  'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed
  
  'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
    'steps': 20, // the more steps the slower animation gets
    'ms': 20 // the less ms the quicker your animation gets
  }, 
  'linear': { // applys only if [animate: linear] - set scroll px|ms
    'px': 55, // the more px the quicker your animation gets
    'ms': 10 // the less ms the quicker your animation gets
  }, 
};

// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();
</pre>
<br />
<br />
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae illo nobis quo autem molestias voluptatum quam, amet ipsum debitis, iure animi illum soluta eaque qui perspiciatis harum, sequi nesciunt.</span><span>Quisquam nesciunt aspernatur a possimus pariatur enim architecto. Hic aperiam sit repellat doloremque vel est soluta et assumenda dolore, sint sapiente porro, quam impedit. Sint praesentium quas excepturi, voluptatem dicta!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, porro nisi molestias minima corrupti tempore, dolorum fugiat ipsam dicta doloremque accusamus atque consequatur iusto natus, mollitia distinctio odit dolor tempora.</span><span>Perferendis a in laudantium accusantium, dolorum eius placeat velit porro similique, eum cumque veniam neque aspernatur architecto suscipit rem laboriosam voluptates laborum? Voluptates tempora necessitatibus animi nostrum quod, maxime odio.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusantium, itaque corporis repellat pariatur soluta officia perspiciatis in reprehenderit facere, incidunt saepe excepturi. Inventore atque ex illo, ipsam at deserunt.</span><span>Laborum inventore officia, perspiciatis cumque magni consequatur iste accusantium soluta, nesciunt blanditiis voluptatibus adipisci laudantium mollitia minus quia necessitatibus voluptates. Minima unde quos impedit necessitatibus aspernatur minus maiores ipsa eligendi!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nesciunt, explicabo similique, quo maxime modi, aliquid, voluptatibus repellendus dolorum placeat mollitia ea dicta quia laboriosam alias dignissimos ipsam tenetur. Nulla.</span><span>Vel maiores necessitatibus odio voluptate debitis, error in accusamus nulla, eum, nemo et ea commodi. Autem numquam at, consequatur temporibus. Mollitia placeat nobis blanditiis impedit distinctio! Ad, incidunt fugiat sed.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatum, odio quam omnis iste laudantium, itaque architecto, eos ullam debitis delectus sapiente nemo autem reprehenderit. Dolorem quidem facere ipsam! Nisi.</span><span>Vitae quaerat modi voluptatibus ratione numquam? Sapiente aliquid officia pariatur quibusdam aliquam id expedita non recusandae, cumque deserunt asperiores. Corrupti et doloribus aspernatur ipsum asperiores, ipsa unde corporis commodi reiciendis?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci minus iste, nesciunt itaque quisquam quidem voluptatum assumenda rerum aliquid, excepturi voluptatem tempora. Possimus ratione alias a error vel, rem.</span><span>Officia esse error accusantium veritatis ad, et sit animi? Recusandae mollitia odit tenetur ad cumque maiores eligendi blanditiis nobis hic tempora obcaecati consequatur commodi totam, debitis, veniam, ducimus molestias ut.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quibusdam, tempora cupiditate quaerat tempore ullam delectus voluptates optio eum placeat provident consequatur iure reprehenderit vero quae sapiente architecto earum nemo.</span><span>Quis molestias sint fuga doloribus, necessitatibus nulla. Esse ipsa, itaque asperiores. Tempora a sequi nobis cumque incidunt aspernatur, pariatur rem voluptatibus. Atque veniam magnam, ea laudantium ipsum reprehenderit sapiente repellendus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, pariatur at explicabo aliquid repudiandae vero eum quasi totam voluptates iusto unde ad repellendus ipsam et voluptatem hic adipisci! Vero, nobis!</span><span>Consequatur eligendi quo quas omnis architecto dolorum aperiam doloremque labore, explicabo enim incidunt vitae saepe, quod soluta illo odit provident amet beatae quasi animi. Similique nostrum molestiae animi corrupti qui?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quis, tempora laborum incidunt qui fuga adipisci doloremque iusto commodi vitae est, nemo iure placeat ut sit optio, consequuntur voluptas impedit.</span><span>Eos officiis, hic esse unde eaque, aut tenetur voluptate quam sint vel exercitationem totam dolor odio soluta illo praesentium non corrupti! Consequuntur velit, mollitia excepturi. Minus, veniam accusantium! Aliquam, ea!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quis reiciendis veritatis expedita velit vitae amet magni sunt rerum in blanditiis aut tempore quia fugiat, voluptates officia quaerat quam id.</span><span>Sapiente tempore repudiandae, quae doloremque ullam odio quia ea! Impedit atque, ipsa consequatur quis obcaecati voluptas necessitatibus, cupiditate sunt amet ab modi illum inventore, a dolor enim similique architecto est!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque non aliquam, sit illo quas deserunt esse nobis reprehenderit quidem fuga beatae eligendi reiciendis omnis qui repellat velit earum blanditiis possimus.</span><span>Provident aspernatur ducimus, illum beatae debitis vitae non dolorum rem officia nostrum natus accusantium perspiciatis ad soluta maiores praesentium eveniet qui hic quis at quaerat ea perferendis. Ut, aut, natus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corrupti quibusdam, sed hic veniam. Perspiciatis ex, quod architecto natus autem totam at commodi excepturi maxime pariatur corporis, veritatis vero, praesentium.</span><span>Nesciunt suscipit, nobis eos perferendis ex quaerat inventore nihil qui magnam saepe rerum velit reiciendis ipsam deleniti ducimus eligendi odio eius minima vero, nisi voluptates amet eaque, iste, labore laudantium.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptas accusantium ad omnis velit distinctio! Adipisci magnam nihil nostrum molestiae rem dolores, ut ad nemo, dolor quos itaque maiores quaerat!</span><span>Quia ad suscipit reprehenderit vitae inventore eius non culpa maiores omnis sit obcaecati vel placeat quibusdam, ipsa exercitationem nam odit, magni nobis. Quam quas, accusamus expedita molestiae asperiores eaque ex?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum explicabo doloribus nihil iusto quasi vel expedita dignissimos amet mollitia, temporibus aut atque architecto assumenda dolorum nam velit deserunt totam numquam.</span><span>Ab perferendis labore, quae. Quidem architecto quo officia deserunt ea doloribus libero molestias id nisi perferendis eum porro, quibusdam! Odit aliquid placeat rem aut officia minus sit esse eos obcaecati!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nostrum repellendus placeat, unde aperiam. Fuga, voluptas, minima. Debitis nemo ducimus itaque laboriosam error quaerat reprehenderit quo animi incidunt. Nulla, quis!</span><span>Explicabo assumenda dicta ratione? Tempora commodi asperiores, explicabo doloremque eius quia impedit possimus architecto sit nemo odio eum fuga minima dolor iste mollitia sequi dolorem perspiciatis unde quisquam laborum soluta.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam officia corporis, reiciendis laudantium, voluptate voluptates necessitatibus assumenda, delectus quisquam velit deserunt! Reprehenderit, vel quaerat accusantium nesciunt libero animi. Sequi, eveniet?</span><span>Animi natus pariatur porro, alias, veniam aut est tempora adipisci molestias harum modi cumque assumenda enim! Expedita eveniet autem illum rerum nostrum ipsum alias neque aut, dolorum impedit pariatur non?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid rerum, odio veniam ipsam ad officia quos repellat ex aperiam voluptatum optio est animi possimus minus. Sapiente voluptates amet dolorem.</span><span>Illo necessitatibus similique asperiores inventore ut cumque nihil assumenda debitis explicabo rerum, dolorum molestiae culpa accusantium. Nisi doloremque optio provident blanditiis, eum ipsam asperiores, consequatur aliquam vel sit mollitia sunt.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, totam harum perferendis. Minus ea perferendis laboriosam, iste, qui corrupti, quas veritatis omnis officiis animi fuga perspiciatis impedit! Error, harum, voluptas.</span><span>Omnis laborum, cum mollitia facilis ipsa unde distinctio maxime nesciunt illum perspiciatis ut officiis, eligendi numquam dolorem quod modi ipsam est rerum perferendis repellendus totam. Maxime excepturi culpa alias labore.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit deleniti, odit sit consequatur dolorum omnis repellendus, alias vel ullam numquam. Nostrum obcaecati hic, possimus delectus nam atque aliquid explicabo cum.</span><span>Explicabo tenetur minima consequatur, aliquam, laudantium non consequuntur facilis sint, suscipit debitis ex atque mollitia magni quod repellat ratione dolorum excepturi molestiae cumque iusto eos unde? Voluptatum dolores, porro provident!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At laboriosam fuga aperiam eveniet, obcaecati esse, nulla porro iure molestiae praesentium sint fugiat ea voluptate suscipit voluptates mollitia, voluptatibus. Autem, non.</span><span>Numquam velit culpa tempora ratione ipsum minus modi in? Nisi reiciendis, voluptate voluptatem maxime repellat quae odio, repellendus aliquid laborum dolorem. Labore, fuga ea minima explicabo quae voluptatum necessitatibus, similique.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, rerum dolorum nemo error fugiat ut, modi, architecto libero maxime laborum repellendus doloribus neque aperiam adipisci quaerat obcaecati deserunt consequuntur amet!</span><span>Sint, assumenda nisi obcaecati doloremque iste. Perspiciatis accusantium, distinctio impedit cum esse recusandae sunt. Officiis culpa dolore eius, doloribus natus, dolorum excepturi vitae fugiat ullam provident harum! Suscipit, assumenda, harum.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nihil tenetur tempore eligendi qui nesciunt consequatur delectus accusantium consectetur ipsa, nulla doloribus dolores rerum corporis, laborum, laboriosam hic mollitia repellat.</span><span>Ab deleniti vitae blanditiis quod tenetur! Voluptatem temporibus ab eaque quis? Quis odio aliquid harum temporibus totam, ipsa eius iusto fugiat enim in, quibusdam molestiae aliquam consequatur nulla, consequuntur sint.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit praesentium quos, earum nesciunt laudantium illo tempora eligendi, porro doloremque mollitia neque aperiam inventore nam maxime dolor labore aspernatur molestias.</span><span>Voluptatibus provident hic cupiditate placeat, ut reprehenderit nisi eum, dolores ad sed quis. Doloribus molestiae, quae rem odit expedita soluta, facilis animi corporis velit ut in, recusandae harum laboriosam veritatis.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt repudiandae molestias magnam delectus veritatis labore, corporis dicta officia quos, ad corrupti odit! Ad hic officia maxime eveniet consectetur similique adipisci!</span><span>Quia at, nesciunt aliquid delectus ex alias voluptas maxime hic esse. Incidunt, laborum quos mollitia dolores et! Voluptas commodi asperiores, fugit quidem quis corporis, a eaque, animi, autem deserunt repellendus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quas, voluptas hic minima inventore optio, id quidem placeat necessitatibus omnis voluptatibus vitae mollitia tempora consequuntur consequatur, illo facilis accusamus illum.</span><span>Voluptates consequuntur ipsam odit. Eius quis ipsam vitae, nihil molestias perferendis corporis recusandae consequatur vero iure blanditiis quas adipisci quos voluptatem rem illo voluptate. Eveniet officiis iure sit laborum veniam.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a quis cumque nostrum quisquam molestiae pariatur, asperiores natus necessitatibus adipisci illum cupiditate nam vero, tempora excepturi laborum, earum. Voluptates, nobis.</span><span>Pariatur suscipit, hic blanditiis libero, iusto, quam cupiditate nam error id asperiores repellat ab consequatur vitae ipsa voluptatem totam magni reiciendis expedita maxime dolor! Minus explicabo quas, laborum ab omnis!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore qui ad assumenda placeat optio illo molestias corporis dolorum cum. Doloribus eius autem obcaecati minima, asperiores iure dignissimos ducimus suscipit dolorem.</span><span>Blanditiis earum accusamus eaque temporibus necessitatibus voluptatum dolorem enim debitis inventore assumenda quae error perspiciatis aut, nulla delectus quam ipsa sapiente ea aliquam laboriosam repudiandae. Nesciunt praesentium, beatae eos quasi!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dicta voluptate impedit? Ad voluptatum dicta earum perferendis asperiores. Dolore distinctio modi expedita consequatur provident perspiciatis neque totam rerum placeat quas.</span><span>Eveniet optio est possimus iste accusantium ipsum illum. Maiores saepe repudiandae facere, delectus iure dolorem vitae nihil pariatur minima, reprehenderit eligendi dolore impedit, nisi doloribus quidem similique. Optio, delectus, minus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ex molestiae architecto enim nihil tempore, atque consequuntur doloribus recusandae sed consequatur veniam quos, in consectetur perspiciatis magni nostrum ab voluptates.</span><span>Nisi quos mollitia quis in maiores asperiores labore deserunt! Voluptate voluptas adipisci qui hic officia molestias, laborum necessitatibus sint nam vel minus incidunt perspiciatis recusandae sunt, rerum suscipit doloremque possimus!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nihil perferendis quae quidem facilis aliquid pariatur possimus hic asperiores, recusandae exercitationem adipisci atque laborum, delectus, odit ab reprehenderit distinctio dolor.</span><span>Non excepturi quos aspernatur repudiandae laboriosam, unde molestias, totam, sapiente harum accusamus delectus laborum ipsam velit amet nisi! Consectetur aliquam provident voluptatibus saepe repudiandae eveniet laborum beatae, animi, voluptate dolores.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque magni, eum ipsa, veritatis facere voluptatem dolorum nobis neque minus debitis asperiores iste. Pariatur sequi quam, tempora. Dignissimos, esse similique tempora.</span><span>Ex delectus excepturi autem sunt, nemo repudiandae, recusandae nostrum accusantium nobis temporibus magnam eligendi similique veritatis deleniti, eaque blanditiis possimus at! Repellat alias laboriosam ipsum commodi dolorem, corporis dolore suscipit!</span></p>

Rozwiń fragment kodu

DevWL
źródło

1

Cóż, jest to bardzo proste, jeśli przyjrzysz się bliżej. Być może to OOP sprawia, że wygląda na to, że byłoby trochę bardziej skomplikowane niż w rzeczywistości. Inne fragmenty nie będą zawierać funkcji zwijania przewijania. Więc zamieściłem coś odrobinę bardziej kompletnego. Jeśli cię to nie obchodzi, moje rozwiązanie może wyglądać nieco bardziej niż twoje potrzeby. Myślę, że aby działało w FF i IE, wystarczy dodać prefiks CSS. Naprawię to na wypadek, gdyby ktoś o to poprosił. Dodałem CSS, ponieważ chciałem, aby było to rozwiązanie „kopiuj / wklej”. Nie sądzę, że może to być łatwiejsze :-).

DevWL,

Ok, to nie jest problem z prefiksem :), ale i tak go naprawię.

DevWL,

Problem rozwiązany. Teraz będzie działać w IE, FF i Chrome ... Oto co się stało: „document.documentElement.scrollTop” Działa w Firefox i IE, ale nie w Chrome, „document.body.scrollTop” działa w Chrome, ale nie w Firefox i nie w IE. Aby rozwiązać problem, nowa metoda [scrollTop ()] została zaimplementowana w prototypie klasy. Nowa metoda zwraca wartość szacunku z przeglądarki, w której działa: // var curentScrollTop = document.documentElement.scrollTop || document.body.scrollTop; // return curentScrollTop;

DevWL

Kolejny błąd IE został naprawiony. classList.add ('class1, class2'); zastosuje tylko klasę 1, klasa 2 zostanie zignorowana,. Poprawka: classList.add ('class1'); classList.add ('class2'); Teraz przycisk jest ukryty podczas ładowania IE.

DevWL,

6

Łatwo.

var scrollIt = function(time) {
    // time = scroll time in ms
    var start = new Date().getTime(),
        scroll = document.documentElement.scrollTop + document.body.scrollTop,
        timer = setInterval(function() {
            var now = Math.min(time,(new Date().getTime())-start)/time;
            document.documentElement.scrollTop
                = document.body.scrollTop = (1-time)/start*scroll;
            if( now == 1) clearTimeout(timer);
        },25);
}

Niet the Dark Absol
źródło

Lub po prostu window.scrollTo(x, y);.

Rob W

3

To jednak nie ożywia.

Niet the Dark Absol

Zaproponowałem alternatywną opcję dla .scrollTopi .scrollLeft.

Rob W

@NiettheDarkAbsol To jest tylko funkcja, która dba o body.scrolltop i documentElement.scrolltop. ale są pewne błędy, takie jak brak przewijania, brak średnika itp. Czy mógłbyś to poprawić.

Deniz Porsuk,

@DenizPorsuk Masz rację, że „przewijanie nie jest używane”, miało być tak *scrollprzy obliczaniu pozycji przewijania. Jednak nie widzę żadnych zaginionych ;...

Niet the Dark Absol

2

Właśnie stworzyłem to rozwiązanie tylko dla javascript poniżej.

Proste użycie:

EPPZScrollTo.scrollVerticalToElementById('wrapper', 0);

Obiekt silnika (możesz majstrować przy filtrze, wartości fps):

/**
 *
 * Created by Borbás Geri on 12/17/13
 * Copyright (c) 2013 eppz! development, LLC.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */


var EPPZScrollTo =
{
    /**
     * Helpers.
     */
    documentVerticalScrollPosition: function()
    {
        if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
        if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
        return 0; // None of the above.
    },

    viewportHeight: function()
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

    documentHeight: function()
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

    documentMaximumScrollPosition: function()
    { return this.documentHeight() - this.viewportHeight(); },

    elementVerticalClientPositionById: function(id)
    {
        var element = document.getElementById(id);
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },

    /**
     * Animation tick.
     */
    scrollVerticalTickToPosition: function(currentPosition, targetPosition)
    {
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

        // Snap, then stop if arrived.
        var arrived = (Math.abs(difference) <= 0.5);
        if (arrived)
        {
            // Apply target.
            scrollTo(0.0, targetPosition);
            return;
        }

        // Filtered position.
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

        // Apply target.
        scrollTo(0.0, Math.round(currentPosition));

        // Schedule next tick.
        setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
    },

    /**
     * For public use.
     *
     * @param id The id of the element to scroll to.
     * @param padding Top padding to apply above element.
     */
    scrollVerticalToElementById: function(id, padding)
    {
        var element = document.getElementById(id);
        if (element == null)
        {
            console.warn('Cannot find element with id \''+id+'\'.');
            return;
        }

        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
        var currentPosition = this.documentVerticalScrollPosition();

        // Clamp.
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

        // Start animation.
        this.scrollVerticalTickToPosition(currentPosition, targetPosition);
    }
};

Geri Borbás
źródło

8

Człowieku, naprawdę? Stworzenie tego potwornego kodu jest jak użycie wyrzutni rakiet do zabicia muchy.

Killah,

3

@Killah Naprawdę dbam o proste użycie i tylko czytelność. Mogę opublikować to zminimalizowane, jeśli chcesz. :)

Geri Borbás,

Chciałem powiedzieć, że jest tam zbyt wiele funkcji pomocniczych (dlaczego potrzebujesz funkcji pomocniczej, która jest używana raz?), console.warnA parametr string setTimeoutnie jest odpowiedni w kodzie produkcyjnym (druga jest właściwie nieodpowiednia gdziekolwiek, ponieważ w evalzasadzie).

Killah

1

Zakładając, że wywołanie funkcji nie jest kosztowne, wolę wyodrębnić dowolny kod do nazwanej funkcji zamiast komentować wszystko dookoła. Więc ty (przynajmniej ja) potrafisz lepiej czytać kod, również kod klienta może być krótszy dziesięć linijek.

Geri Borbás

2

Opierając się na niektórych odpowiedziach tutaj, ale używając prostej matematyki do płynnego przejścia za pomocą krzywej sinusoidalnej:

scrollTo(element, from, to, duration, currentTime) {
       if (from <= 0) { from = 0;}
       if (to <= 0) { to = 0;}
       if (currentTime>=duration) return;
       let delta = to-from;
       let progress = currentTime / duration * Math.PI / 2;
       let position = delta * (Math.sin(progress));
       setTimeout(() => {
           element.scrollTop = from + position;
           this.scrollTo(element, from, to, duration, currentTime + 10);
       }, 10);
   }

Stosowanie:

// Smoothly scroll from current position to new position in 1/2 second.
scrollTo(element, element.scrollTop, element.scrollTop + 400, 500, 0);

PS. zwróć uwagę na styl ES6

Sybrand
źródło

1

Jest to podejście przeglądarkowe oparte na powyższych odpowiedziach

function scrollTo(to, duration) {
    if (duration < 0) return;
    var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
    var difference = to - scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
      scrollTop = scrollTop + perTick;
      document.body.scrollTop = scrollTop;
      document.documentElement.scrollTop = scrollTop;
      if (scrollTop === to) return;
      scrollTo(to, duration - 10);
    }, 10);
  }

Belchior Oliveira
źródło

Niezła odpowiedź! Czy może Pan wyjaśnić, co dzieje się z differencea perTick?

Jessica

1

Jeszcze innym podejściem jest użycie window.scrollBy

JSFiddle

function scroll(pxPerFrame, duration) {
        if (!pxPerFrame || !duration) return;
        const end = new Date().getTime() + duration;
        step(); 

        function step() {
          window.scrollBy(0, pxPerFrame);
          if (new Date().getTime() < end) {
            window.setTimeout(step, 1000 / 60);
          } else {
            console.log('done scrolling'); 
          }
        }
      }

body {
  width: 200px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<button onclick="scroll(-5, 3000)">
scroll(-5, 3000)
</button>
</p>

Rozwiń fragment kodu

remdevtec
źródło

1

Wybrałem wersję @akai odpowiedzi @timwolla i w zamian dodałem funkcję stopAnimation, więc przed uruchomieniem nowej animacji starą można zatrzymać.

if ( this.stopAnimation )
    this.stopAnimation()

    this.stopAnimation = scrollTo( el, scrollDestination, 300 )


// definitions

function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        increment = 20,
        timeOut;

    var animateScroll = function(elapsedTime) {        
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);                        
        element.scrollTop = position; 
        if (elapsedTime < duration) {
            timeOut = setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);

    return stopAnimation

    function stopAnimation() {
        clearTimeout( timeOut )
    }
}

function easeInOut(currentTime, start, change, duration) {
    currentTime /= duration / 2;
    if (currentTime < 1) {
        return change / 2 * currentTime * currentTime + start;
    }
    currentTime -= 1;
    return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}

Luckylooke
źródło

0

Inne podejście oparte na różnych przeglądarkach oparte na powyższym rozwiązaniu

function doScrollTo(to, duration) {
    var element = document.documentElement;

        var start = element.scrollTop,
        change = to - start,
        increment = 20,
        i = 0;

    var animateScroll = function(elapsedTime) {
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);
        if (i === 1 && window.scrollY === start) {
            element = document.body;
            start = element.scrollTop;
        }
        element.scrollTop = position;
        if (!i) i++;
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

Sztuką jest kontrolowanie faktycznej zmiany przewijania, a jeśli jest ona zerowa, zmień element przewijania.

Zdenek Hatak
źródło

-1

Animacja przewijania liniowego do dołu. Czysty JS, bez JQuery. Może moje rozwiązanie będzie komuś pomocne.

let action_count = 8;
let speed_ms = 15;
let objDiv = document.getElementsByClassName('js_y5_area3').item(0);

let scroll_height = objDiv.scrollHeight;
let window_height = objDiv.offsetHeight;

let scroll_top = objDiv.scrollTop;
let need_scroll_top = scroll_height - window_height;

if (scroll_top < need_scroll_top)
{
    let step = Math.ceil((need_scroll_top - scroll_top) / action_count);

    let scrollInterval = setInterval(function()
    {
        scroll_top += step;
        objDiv.scrollTop = scroll_top;

        if (scroll_top >= need_scroll_top)
        {
            clearInterval(scrollInterval);
        }

    }, speed_ms);
}

Możesz zmieniać zmienne action_count, speed_msaby skonfigurować animację przewijania według własnego gustu.

sNICkerssss
źródło

-2

Skorzystaj z tego rozwiązania

animate(document.documentElement, 'scrollTop', 0, 200);

Dzięki

Lokesh Gamot
źródło

Niestety wygląda na to, że nie jest to zbyt doświadczone w różnych przeglądarkach. :(

Lucas Morgan

@LucasMorgan, po prostu musisz znaleźć właściwy element dom dla „document.documentElemen”, jak cokolwiek ci odpowiada

Lokesh Gamot

1

Chyba że animate()w zasięgu okna jest jakaś funkcja ... Myślę, że źle zrozumiałeś. Element.animate()Funkcja nie jest uznawany przez wielu przeglądarek. Zobacz developer.mozilla.org/en-US/docs/Web/API/Element/animate

Lucas Morgan

Tak, źle zrozumiałem. Mówisz o funkcji jquery. Zakładałem, że nie przywołałeś jquery, ponieważ pytanie nie wymaga żadnej jquery. Mój błąd!

Lucas Morgan

-3

Widzę, że większość / wszystkie powyższe posty szukają przycisku z javascript. Działa to, o ile masz tylko jeden przycisk. Poleciłbym zdefiniowanie elementu „onclick” wewnątrz przycisku. To „kliknięcie” wywołałoby wówczas funkcję powodującą przewijanie.

Jeśli zrobisz to w ten sposób, możesz użyć więcej niż jednego przycisku, o ile przycisk wygląda mniej więcej tak:

<button onclick="scrollTo(document.body, 0, 1250)">To the top</button>

użytkownik4251442
źródło

3

To nie jest animowane.

dmackerman

JavaScript w przeglądarce (nie jQuery…) przewiń do górnej animacji

Odpowiedzi: