滾動/跳轉到沒有jQuery的ID

我已經搜索了很多可用解決方案的主題。
但沒有發現什麼。大多數腳本對我的目的來說太混亂了。
尋求僅基於Javascript的解決方案。 在我的項目中，不可能使用jQuery。
我需要跳轉或滾動到id。
滾動/跳轉到沒有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>

現在，您可以跳轉到一個div名爲ID

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

來源

2012-11-07 user1805546

你究竟是什麼意思的「HTML錨不工作」 - 你是如何實現它？ – Leon

錨標記使用href和沒有的onclick

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

和DIV：

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

來源

2012-11-07 09:35:35 Rusty

我不能使用錨點 – user1805546

你已經在你的html中使用錨點標記 ..所以建議你。 – Rusty

下面的代碼可以幫助你

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

來源

2012-11-07 09:37:30 Oxi

它應該是'document.body.scrollTop'而不是'objControl.scrollTop'嗎？ –

@Oxi var我設置在頭部區域和onclick我使用？ – user1805546

@ user1805546在您的onclick監聽器中使用div的id例如'target1' – Oxi

也許你應該試着scrollIntoView。

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

這將滾動到您的元素。

來源

2014-05-02 07:05:08 Aaki

只需注意：使用'id'時，請確保不要用'＃'符號加上它。例如，如果要跳轉到ID爲myDiv的div，則代碼爲：document.getElementById（'myDiv'）。scrollIntoView（）;' – Devner

這是一個實驗性功能，僅適用於Firefox當前時間 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView –

此工作適用於Chrome上1-26-2017 –

OXI的回答只是wrong.¹

你想要的是：

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-10 21:35:52 anonQ

如果要平滑滾動添加behavior配置。

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

來源

2018-02-21 08:18:55 agriboz

滾動/跳轉到沒有jQuery的ID

回答

相關問題