Scrolltop Animation Without Jquery

jQuery - ScrollTop without animation

maybe if you don't want an animation or anything fancy just use an anchor

<a name="top"></a>

Place it where you need to scroll

and in your function where you are calling use

document.location.href="#top";

You could also create a function to append the anchor before the element, do the document.location thing and later remove that anchor.

http://jsfiddle.net/fSrxr/1/

Smooth scroll anchor links WITHOUT jQuery

Using the function from here: JavaScript animation and modifying it to modify a property (not only a style's property), you can try something like this:

DEMO: http://jsfiddle.net/7TAa2/1/

Just saying...

function animate(elem, style, unit, from, to, time, prop) {
  if (!elem) {
    return;
  }
  var start = new Date().getTime(),
    timer = setInterval(function() {
      var step = Math.min(1, (new Date().getTime() - start) / time);
      if (prop) {
        elem[style] = (from + step * (to - from)) + unit;
      } else {
        elem.style[style] = (from + step * (to - from)) + unit;
      }
      if (step === 1) {
        clearInterval(timer);
      }
    }, 25);
  if (prop) {
    elem[style] = from + unit;
  } else {
    elem.style[style] = from + unit;
  }
}

window.onload = function() {
  var target = document.getElementById("div5");
  animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

div {
  height: 50px;
}

<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>
<div id="div10">asdf11</div>
<div id="div10">asdf12</div>
<div id="div10">asdf13</div>
<div id="div10">asdf14</div>
<div id="div10">asdf15</div>
<div id="div10">asdf16</div>
<div id="div10">asdf17</div>
<div id="div10">asdf18</div>
<div id="div10">asdf19</div>
<div id="div10">asdf20</div>

How to get scrollTop position realtime without jQuery?

You can event listen scroll:

const navbar = document.getElementById("navbar");window.addEventListener("scroll", function(event) {    var top  = window.pageYOffset || document.documentElement.scrollTop,    left = window.pageXOffset || document.documentElement.scrollLeft;    console.log(top,left);    if (top >= 10) {        console.log('applying...........')        navbar.classList.add('pad-nav-b', 'bg-a2');        navbar.classList.remove('pad-nav-a', 'bg-a1');    }     else {        console.log('removing...........')        navbar.classList.remove('pad-nav-b', 'bg-a2');        navbar.classList.add('pad-nav-a', 'bg-a1');    }}, false);

<html>    <head>       <style>        .bg-a1{            background-color: #23e896;            color: white;        }        .bg-a2{            background-color: #1cb374;            color: white;            animation: all 0.3 ease-in-out;        }        .pad-nav-a{            padding: 30px;        }        .pad-nav-b{            padding: 20px;            animation: all 0.3 ease-in-out;        }        body {            background-color: lightblue;            height:3000px;        }        </style>    </head>    <body>        <div id="navbar">nav bar</div>    </body><html>

Scroll to top of an element without using animate

Use .scrollTop()

$("#button").click(function() {  $('html, body').scrollTop( $("#elementtoScrollToID").offset().top);});

.dummy {  height: 1200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><button id="button">Test</button><div class="dummy"></div><div id="elementtoScrollToID">elementtoScrollToID</div>

How to stop scroll animation without affecting the callback (jQuery.animate())

Solution :

function Scroll_To_Top(element, offset, duration, easing, callback = null, args = null) {
    $('html, body').on('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function() {
        $('html, body').off('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove');
        $('html, body').stop();

        if ((callback != null) && (args != null)) {
            callback.apply(this, args);
        }
        else {
            if ((callback != null) && (args == null)) {
                callback();
            }
        }
    });
    $('html, body').animate({scrollTop: element.offset().top - offset}, duration, easing, function() {
        $('html, body').off('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove');

        if ((callback != null) && (args != null)) {
            callback.apply(this, args);
        }
        else {
            if ((callback != null) && (args == null)) {
                callback();
            }
        }
    });
}

Jump to the bottom of the page with jQuery - Without animation

This will do

$('html, body').scrollTop( $(document).height() );

scrollTop( vHeight );

jQuery .scrollTop(); + animation

To do this, you can set a callback function for the animate command which will execute after the scroll animation has finished.

For example:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

Where that alert code is, you can execute more javascript to add in further animation.

Also, the 'swing' is there to set the easing. Check out http://api.jquery.com/animate/ for more info.