'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. 

<head>
<script type="text/javascript">
//here has to go function
</script>
</head>



MY call is:

<a onclick="function_call+targetname"><img src="image1" alt="name1"></a>
<a onclick="function_call+targetname"><img src="image2" alt="name2"></a>
<a onclick="function_call+targetname"><img src="image3" alt="name3"></a>

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:

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

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:

<head> <script type="text/javascript"> function scroll(element){   
var ele = document.getElementById(element);   
window.scrollTo(ele.offsetLeft,ele.offsetTop); } </script> </head>

Navigation Call:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

Now you can jump to a div with called ID

<div id="target1">CONTENT</div>
javascripthtmlscroll


Solution 1:[1]

Maybe You should try scrollIntoView.

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

This will scroll to your Element.

Solution 2:[2]

if you want smooth scrolling add behavior configuration.

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

Solution 3:[3]

Add the function:

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

Trigger the function:

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

Solution 4:[4]

on anchor tag use href and not onclick

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

And div:

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

Solution 5:[5]

below code might help you

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

Solution 6:[6]

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 7:[7]

This is what worked for me

  • Give id to each section

  • In Javascript file create a function

  • Call that function using onclick in the nav links

let About = () =>document.getElementById('About').scrollIntoView();
.about-link {
 min-height: 500px;
}
<div class="about-link">
<a class="nav-link" aria-current="page" onclick="About()">About</a>
</div>
<section id="About">
Here is about section
</section>

Solution 8:[8]

I'm super surprised no one has shown you a way to do it without even using JavaScript code.

Add an ID to your element, then in your link tag add the href with the ID Name

Example

<a href="#AboutMe">About Me</a>

<div id="AboutMe">
// Some code
</div>

Note: This is only to jump, not to scroll!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mo.
Solution 2 agriboz
Solution 3 Leon
Solution 4 Rusty
Solution 5 Oxi
Solution 6 anonQ
Solution 7 Nirav Joshi
Solution 8

Related Questions