不使用 jQuery 滚动/跳转到 id

我搜索了很多有用的解决方案。我需要一个跳转或滚动到 id。 

<head>
<script type="text/javascript">
//here has to go function
</script>
</head>



我的决定是:

<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>

所以我必须在导航中使用 onclick 事件。

现在单击我想跳转或滚动到我的页面中的 div id:

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

非常重要的一点是: html 锚不能正常工作，否则一切都会很简单。 < br > < br > 我之前已经简单地使用过了:

onclick="window.location.hash='target';"

但我在易趣有限制。他们不允许这个简单的代码。

我也不能调用外部的 javascript (只能在头部区域使用 JS)。此外，不可能使用“ cookie”，“ cookie”，“ place (”，IFRAME，META 或包括)和 basehref。

它不可能很难与一个位的 JS 跳转到一个特定的点。 我不需要特效。

有没有人有一个简单而有用的解决方案？

我自己找到了一个解决方案，感谢欧克西。我跟随你 方式。

对于所有对我的解决方案感兴趣的人:

<head> <script type="text/javascript"> function scroll(element){
var ele = document.getElementById(element);
window.scrollTo(ele.offsetLeft,ele.offsetTop); } </script> </head>

导航电话:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

现在您可以跳转到一个名为 ID 的 div

<div id="target1">CONTENT</div>
198508 次浏览
小开

on anchor tag use href and not onclick

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

And div:

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

below code might help you

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

Maybe You should try scrollIntoView.

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

This will scroll to your Element.

小开

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

小开

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>
小开

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>

小开

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!

小开

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>


提交答案