Question

我已经搜索了许多可用解决方案的主题。
但是没有找到一些东西。为了我的目的，大多数脚本都太混乱了。
只寻求基于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”，“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>

导航电话：

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

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

<div id="target1">CONTENT</div>

Answer 1

也许你应该尝试使用scrollIntoView。

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

这将滚动到您的元素。

Answer 2

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

document.getElementById('id').scrollIntoView({
  behavior: 'smooth'
});

Answer 3

下面的代码可能会帮助你

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

Answer 4

on anchor tag使用href而不是onclick

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

和div：

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

Answer 5

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

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

Answer 6

添加功能

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

触发功能：

<a href="javascript: scrollToForm();">Jump to form</a>

不使用jQuery滚动/跳转到id

6 个答案: