admin管理员组文章数量:1133955
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>
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 Commented Nov 7, 2012 at 10:09
9 Answers
Reset to default 214Maybe You should try scrollIntoView.
document.getElementById('id').scrollIntoView();
This will scroll to your Element.
if you want smooth scrolling add behavior configuration.
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
Add the function:
function scrollToForm() {
document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}
Trigger the function:
<a href="javascript: scrollToForm();">Jump to form</a>
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
on anchor tag use href and not onclick
<a href="#target1">asdf<a>
And div:
<div id="target1">some content</div>
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>below code might help you
var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;
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>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!
本文标签： javascriptScrollJump to id without jQueryStack Overflow
版权声明：本文标题：javascript - ScrollJump to id without jQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736773524a1952213.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论