83

我已经搜索了很多主题以寻找可用的解决方案。
但没有发现什么。大多数脚本对于我的目的来说太混乱了。
寻求仅基于 Javascript 的解决方案。在我的项目中，无法使用 jQuery。
我需要跳转或滚动到 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 事件。

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

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

这很重要：不幸的是，html 锚点不起作用。否则一切都会很容易。

我简单地使用了bevore：

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

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

我也不能调用外部 javascript（仅在头部区域使用 JS）。此外，不能使用：“cookie.”、“cookie”、“替换（”、IFRAME、META 或包含）和基本 href。

用一点 JS 就可以不难跳到一个特定的点。我不需要特殊效果。

有没有人有一个苗条而有用的解决方案？

我自己找到了解决方案，感谢 Oxi。我按照你的方式。

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

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

6 回答 6

162

也许你应该试试scrollIntoView。

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

这将滚动到您的元素。

于 2014-05-02T07:05:08.370 回答
81

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

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});
于 2018-02-21T08:18:55.777 回答
15

添加功能：

function scrollToForm() {
  document.querySelector('#form').scrollIntoView({behavior: 'smooth'});
}

触发函数：

<a href="javascript: scrollToForm();">Jump to form</a>
于 2018-11-16T10:11:04.410 回答
3

下面的代码可能会帮助你

var objControl=document.getElementById("divid");
objControl.scrollTop = objControl.offsetTop;
于 2012-11-07T09:37:30.673 回答
3

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

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

和 div：

<div id="target1">some content</div>
于 2012-11-07T09:35:35.413 回答
2

Oxi 的回答是错误的。¹

你想要的是：

var container = document.body,
element = document.getElementById('ElementID');
container.scrollTop = element.offsetTop;

工作示例：

(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 );
})();

¹我没有足够的声誉来评论他的回答

于 2017-11-10T21:35:52.950 回答