Scroll / Jump to id without jQuery

Question

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>

what exactly do you mean by "html anchor not work" - how did you implement it?? — Leon, Nov 07 '12 at 10:09

score 200 · Answer 1 · edited Aug 21 '15 at 10:49

200

Maybe You should try scrollIntoView.

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

This will scroll to your Element.

edited Aug 21 '15 at 10:49

Mo.

26,306
36
159
225

answered May 02 '14 at 07:05

Aakash

2,006
1
14
14

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

score 104 · Answer 2 · answered Feb 21 '18 at 08:18

104

if you want smooth scrolling add behavior configuration.

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

answered Feb 21 '18 at 08:18

agriboz

4,724
4
35
49

how can we solve it when we have so many id’s on a single page?? – GoodnessGoodness Chi Aug 12 '20 at 09:15
4

@GoodnessGoodnessChi, ids should be unique. Use classes instead. – Faheem Sep 22 '20 at 02:13
1

and you can use querySelectorAll to get all the elements with the same class. – Faheem Sep 22 '20 at 02:14
The neat answer! – Hidayt Rahman Jun 23 '21 at 09:58
This scrolls a bit too far since we have a nav bar at the top. – Urasquirrel Aug 30 '21 at 15:39

score 21 · Answer 3 · answered Nov 16 '18 at 10:11

21

Add the function:

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

Trigger the function:

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

answered Nov 16 '18 at 10:11

Leon

634
1
7
22

score 9 · Answer 4 · answered Nov 10 '17 at 21:35

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

Note that offsetTop is measured from the element's immediate parent. You can use element.parentElement to get the parent and get its offset if needed. — arlomedia, Aug 26 '22 at 05:51

score 4 · Answer 5 · answered Nov 07 '12 at 09:35

4

on anchor tag use href and not onclick

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

And div:

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

answered Nov 07 '12 at 09:35

Rusty

1,303
2
14
28

1

you are already using anchor tag in your html ..so suggested you . – Rusty Nov 07 '12 at 10:33

score 2 · Answer 6 · answered Nov 07 '12 at 09:37

2

below code might help you

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

answered Nov 07 '12 at 09:37

Oxi

2,918
17
28

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

score 2 · Answer 7 · edited Mar 30 '22 at 09:28

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>

score 2 · Answer 8 · answered Aug 13 '22 at 09:31

you can do it smoothly even without javascript code! just add scroll-behavior: smooth; to scrollable element. example:

#parent {
  scroll-behavior: smooth;
}

#top {
  min-height: 1000px;
  max-width: 100px;
  text-wrap: wrap;
}

#footer {
  background: pink;
}

<div id="parent">
  <div id="top">
    <a href="#footer">move to bottom</a> context is here! Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
    type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum
  </div>
  <div id="footer">
    footer
  </div>
</div>

Developing Developer · Answer 9 · 2022-05-23T08:47:14.877

1

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!

edited May 23 '22 at 08:47

answered May 23 '22 at 08:29

Developing Developer

58
7

Scroll / Jump to id without jQuery

9 Answers9

Linked