Scroll to an element with jQuery

This is achievable without jQuery:

document.getElementById("element-id").scrollIntoView();

This is the way I do it.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Works in any browser.

It can easily be wrapped into a function

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Here is a working example

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Docs

Easy way to achieve the scroll of page to target div id

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

If you want to scroll within an overflow container (instead of $('html, body') answered above), working also with absolute positioning, this is the way to do :

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

After finding the way to get my code work, I think I should make thing a bit clear: For using:

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

you need to be on top of the page since $("#div1").offset().top will return different numbers for different positions you scroll to. If you already scrolled out of the top, you need to specify the exact pageY value (see pageY definition here: https://javascript.info/coordinates).

So now, the problem is to calculate the pageY value of one element. Below is an example in case the scroll container is the body:

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

The above function returns the same number even if you scrolled somewhere. Now, to scroll back to that element:

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");

This is Atharva's answer from: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView. Just wanted to add if your document is in an iframe, you can choose an element in the parent frame to scroll into view:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

Updated answer as of 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

ONELINER

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

<div class="foot">Some footer</div>

This worked for me:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

You just need:

$("selector").get(0).scrollTo(0, 0)