90

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>
Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
user1805546
  • 901
  • 1
  • 6
  • 4

8 Answers8

173

Maybe You should try scrollIntoView.

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

This will scroll to your Element.

Mo.
  • 23,921
  • 35
  • 145
  • 210
Aakash
  • 1,735
  • 1
  • 11
  • 10
  • 4
    Just a note: When using the `id`, make sure that you don't prepend it with `#` sign. For example, if you want to jump to a div with ID `myDiv`, then the code would be: `document.getElementById('myDiv').scrollIntoView();` – Devner Jun 08 '16 at 12:51
  • 4
    this is an experimental feature, working just on Firefox at the current time https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView – Tiberiu Maxim Oct 17 '16 at 14:08
  • Check compatibility here : developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#browser_compatibility – Aakash May 25 '22 at 06:17
92

if you want smooth scrolling add behavior configuration.

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});
agriboz
  • 4,566
  • 2
  • 34
  • 48
17

Add the function:

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

Trigger the function:

<a href="javascript: scrollToForm();">Jump to form</a>
Leon
  • 570
  • 6
  • 21
3

on anchor tag use href and not onclick

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

And div:

<div id="target1">some content</div>
Rusty
  • 1,261
  • 2
  • 14
  • 27
3

below code might help you

var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;
Oxi
  • 2,832
  • 16
  • 27
  • 3
    Should it be `document.body.scrollTop` rather than `objControl.scrollTop`? – Alexander Pavlov Nov 07 '12 at 09:52
  • @Oxi var i set up in head area and onclick i use ? – user1805546 Nov 07 '12 at 10:24
  • @user1805546 in your onclick listener use the id of div for example 'target1' – Oxi Nov 07 '12 at 12:46
  • @Alexander Pavlov it is element scrolltop .. more info @ https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop – Oxi Nov 07 '12 at 12:48
  • 1
    It's a good idea to always double-check your solutions: http://jsfiddle.net/nPegf/1/. Also, MDN says, "If the element can't be scrolled (e.g. it has no overflow or if the element is non-scrollable), scrollTop is set to 0." That said, `scrollTop` makes sense for a _scrollable_ element, i.e. one that has a scrollbar. I'm pretty sure `objControl` does not. – Alexander Pavlov Nov 07 '12 at 15:36
  • 1
    @oxi I think it should be document.body.scrollTop instead of objControl.scrollTop because we want to scroll the page and not inside the component – Rachid Rhafour Mar 26 '19 at 16:38
3

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

anonQ
  • 31
  • 2
0

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>
Nirav Joshi
  • 2,884
  • 1
  • 21
  • 43
Joise MP
  • 1
  • 1
0

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!

Developing Developer
  • 30
  • 6