Scroll / Jump to id without jQuery

Scroll / Jump to id without jQuery

I have search a lot of topics for a usable solution. But dont found something. Most scripts are just too cluttered for my purposes. Seeking a solution based only on Javascript. In my project it is not possible to use jQuery. I need a jump or scroll to id.



MY call is:
name1
name2
name3

So i have to use onclick event in my navigation.
Now onclick i want to jump or scroll to a div id in my page:

some content
some content
some content

It is very important: html anchor not work unfortunately. Otherwise everything would be pretty easy. I have use bevore simply:
onclick=”window.location.hash=’target’;”

But i have restrictions in eBay. They dont allow this simple code.
Also I cant call an external javascript (only use JS in head area). Furthermore, it is not possible to use : “cookie.”, “cookie”, “replace (“, IFRAME, META or includes) and base href.
It can not be hard with a bit of JS jump to a specific point.
I do not need special effects.
Does anyone have a slim and helpful solution?

I Have found a solution by my self and thanks to Oxi. I follow your
way.
For all those interested in my solution:

Navigation Call:

name1

Now you can jump to a div with called ID

CONTENT

Solutions/Answers:

Solution 1:

Maybe You should try scrollIntoView.

document.getElementById('id').scrollIntoView();

This will scroll to your Element.

Solution 2:

if you want smooth scrolling add behavior configuration.

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

Solution 3:

below code might help you

var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;

Solution 4:

on anchor tag use href and not onclick

<a href="#target1">asdf<a>

And div:

<div id="target1">some content</div>

Solution 5:

Oxi’s answer is just wrong.¹

What you want is:

var container = document.body,
element = document.getElementById('ElementID');
container.scrollTop = element.offsetTop;

Working example:

(function (){
  var i = 20, l = 20, html = '';
  while (i--){
    html += '<div id="DIV' +(l-i)+ '">DIV ' +(l-i)+ '</div>';
    html += '<a onclick="document.body.scrollTop=document.getElementById(\'DIV' +i+ '\').offsetTop">';
    html += '[ Scroll to #DIV' +i+ ' ]</a>';
    html += '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
  }
  document.write( html );
})();

¹ I haven’t got enough reputation to comment on his answer

Solution 6:

Add the function:

function scrollToForm() {
  document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}

Trigger the function:

<a href="javascript: scrollToForm();">Jump to form</a>

References