How to scroll to result in native javascript?

Question

I am converting my code to use the DOM API directly instead of using jQuery, there is a scenario which has the functionality of scrolling. I am unable to convert to a version directly using the DOM API:

jQuery code:

function scrollToResult() {
    var $height1 = $('.class1').outerHeight();

    $('body, html').stop().animate({
        scrollTop : $('.class2').offset().top - $height1;
    }, 200);
}

Plain JavaScript code:

function scrollToResult() {
    var $height1 =document.querySelector('.class1').offsetHeight;

  //error
    document.querySelector('body, html').stop
}

I know stop is not any method of JavaScript. How to proceed here?

Possible duplicate of [Cross browser JavaScript (not jQuery...) scroll to top animation](https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation) — Nick Parsons, Oct 05 '18 at 11:05
As a note: it is not jQuery vs ES6 but jQuery vs direct access to the DOM API. In your second code there is no ES6 JavaScript feature. ES6 is a language specification that can be used in various contexts (browser, nodejs, ...) depending on the context there are different APIs available. E.g. the DOM API is available in browsers, but not in nodejs. ES6 features would be something like `let`, `const`, `class`, Promises, arrow functions, destructuring, ... — t.niese, Oct 05 '18 at 11:10

score 5 · Accepted Answer · answered Oct 05 '18 at 11:07

I know stop is not any method of JavaScript. How to proceed here ?

Yes there's no stop() method in native Javascript, but the native way to do that is to use the scrollTo() method, which:

Scrolls to a particular set of coordinates in the document.

You can use the Window.scrollTo() method along with a setTimeout() to make the delay animation happens.

How to scroll to result in native javascript?

1 Answers1