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>
This question is related to
javascript
html
scroll
on anchor tag use href and not onclick
<a href="#target1">asdf<a>
And div:
<div id="target1">some content</div>
Add the function:
function scrollToForm() {
document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}
Trigger the function:
<a href="javascript: scrollToForm();">Jump to form</a>
if you want smooth scrolling add behavior configuration.
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
Maybe You should try scrollIntoView.
document.getElementById('id').scrollIntoView();
This will scroll to your Element.
below code might help you
var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;
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
Source: Stackoverflow.com