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.
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>
9 answers
solution1
99 2014-05-02 07:05:08
Maybe You should try scrollIntoView.
document.getElementById('id').scrollIntoView();
This will scroll to your Element.
solution2
23 2018-02-21 08:18:55
if you want smooth scrolling add behavior configuration.
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
solution3
3 2012-11-07 09:37:30
below code might help you
var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;
solution4
2 2012-11-07 09:35:35
on anchor tag use href and not onclick
<a href="#target1">asdf<a>
And div:
<div id="target1">some content</div>
solution5
2 2018-11-16 10:11:04
Add the function:
function scrollToForm() {
document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}
Trigger the function:
<a href="javascript: scrollToForm();">Jump to form</a>
solution6
1 2017-11-10 21:35:52
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
solution7
0 2022-03-26 10:28:05
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>
solution8
0 2022-05-23 08:29:52
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!
solution9
0 2022-08-13 09:31: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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.