Smooth Scroll Without the Use of Jquery

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 control scroll time without jquery when smooth scrolling to element?

use this function :

Smooth scroll anchor links WITHOUT jQuery

Scroll time is used as parameter.

Smoothscroll without anchors

var pixelsToMove = 50;

$('.myButton').click(function () {
    var currentScrollTopValue = $('#container').scrollTop();

    $('#container').scrollTop(currentScrollTopValue + pixelsToMove);

});

https://api.jquery.com/scrollTop/

hi i want to make this as smooth scroll can anyone help me up

This might be what you are looking for

html {
  scroll-behavior: smooth;
}

Do a simple google search before asking a question here...

Why is my smooth scrolling function not working?

I've found the solution to the issue, adding this allows it to work:

html {
  scroll-behavior: smooth;
}

JQuery smooth scroll - can this be simplified?

If you are using JQuery only for this feature, use scrollIntoView from JavaScript.

With JQuery, this function is enough:

function elevator(where) {
    var the_id = "#" + where;
    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
}

which you can use in html tags like this:

<h1 id="title">Title at the top of the page</h1>
<!-- a lot of space -->
<button onclick="elevator('title')">go up</button>

NOTE: The CSS property is not useful with this function.

Now if you want an explanation of your code:

 $(document).ready(function(){
    // Add smooth scrolling to all links
    // i.e. select all links on your page and add en event for each of them
    // event called when there is a click
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      // the hash is the anchor. For example: "website.com/page.html#hash"
      // we must check if there is an hash in the link
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        // i.e. the default behavior of a link
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){
 
          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      } // End if
    });
  });

Your code is creating the smooth effect for every link automatically.

---

Related Topics