不使用jQuery滚动/跳转到id

use*_*546 48 html javascript scroll

我已经搜索了很多可用解决方案的主题.
但是没有找到一些东西.大多数脚本都太杂乱了,不适合我的目的.
寻求仅基于Javascript的解决方案.在我的项目中,不可能使用jQuery.
我需要跳转或滚动到id.

<head>
<script type="text/javascript">
//here has to go function
</script>
</head>
Run Code Online (Sandbox Code Playgroud)



我的电话是:

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

<div id="target1">some content</div>
<div id="target2">some content</div>
<div id="target3">some content</div>
Run Code Online (Sandbox Code Playgroud)

这非常重要:不幸的是,html锚点无法正常工作.否则一切都会很容易.

我简单地使用bevore:

onclick="window.location.hash='target';"
Run Code Online (Sandbox Code Playgroud)

但我在eBay有限制.他们不允许这个简单的代码.

此外,我不能调用外部JavaScript(只在头部区域使用JS).此外,不可能使用:"cookie.","cookie","replace(",IFRAME,META或includes)和base href.

一点JS跳到特定点就不难了.我不需要特效.

有没有人有一个苗条和有用的解决方案?

我已经找到了自己的解决方案并感谢Oxi.我按照你的方式.

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

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

导航电话:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>
Run Code Online (Sandbox Code Playgroud)

现在,您可以跳转到带有被叫ID的div

<div id="target1">CONTENT</div>
Run Code Online (Sandbox Code Playgroud)

小智 106

也许你应该尝试scrollIntoView.

document.getElementById('id').scrollIntoView();
Run Code Online (Sandbox Code Playgroud)

这将滚动到您的元素.

  • 请注意:使用`id`时,请确保不要在前面添加`#`符号.举例来说,如果你要跳转到一个div ID`myDiv`,则代码应该是:`的document.getElementById( 'myDiv')scrollIntoView();`. (2认同)
  • 这是一个实验性功能,目前只在Firefox上工作https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView (2认同)

agr*_*boz 30

如果你想平滑滚动添加behavior配置.

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});
Run Code Online (Sandbox Code Playgroud)

  • @GoodnessGoodnessChi,id 应该是唯一的。使用类来代替。 (3认同)

Leo*_*eon 14

添加函数:

function scrollToForm() {
  document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}
Run Code Online (Sandbox Code Playgroud)

触发函数:

<a href="javascript: scrollToForm();">Jump to form</a>
Run Code Online (Sandbox Code Playgroud)


小智 9

Oxi的答案是错误的。\xc2\xb9

\n\n

你想要的是:

\n\n
var container = document.body,\nelement = document.getElementById(\'ElementID\');\ncontainer.scrollTop = element.offsetTop;\n
Run Code Online (Sandbox Code Playgroud)\n\n

工作示例:

\n\n
(function (){\n  var i = 20, l = 20, html = \'\';\n  while (i--){\n    html += \'<div id="DIV\' +(l-i)+ \'">DIV \' +(l-i)+ \'</div>\';\n    html += \'<a onclick="document.body.scrollTop=document.getElementById(\\\'DIV\' +i+ \'\\\').offsetTop">\';\n    html += \'[ Scroll to #DIV\' +i+ \' ]</a>\';\n    html += \'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />\';\n  }\n  document.write( html );\n})();\n
Run Code Online (Sandbox Code Playgroud)\n\n

\xc2\xb9 我没有足够的声誉来评论他的答案

\n


Rus*_*sty 4

在锚标记上使用 href 而不是 onclick

<a href="#target1">asdf<a>
Run Code Online (Sandbox Code Playgroud)

和div:

<div id="target1">some content</div>
Run Code Online (Sandbox Code Playgroud)