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)
这将滚动到您的元素.
agr*_*boz 30
如果你想平滑滚动添加behavior
配置.
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
Run Code Online (Sandbox Code Playgroud)
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\nvar 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在锚标记上使用 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)