web-dev-qa-db-ja.com

jQueryなしでIDにスクロール/ジャンプ

使用可能なソリューションを探すために多くのトピックを検索しています。
しかし、何かが見つかりません。ほとんどのスクリプトは、私の目的にはあまりにも乱雑です。
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イベントを使用する必要があります。

今すぐクリックして、ページ内の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またはinclude）および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>
javascripthtmlscroll
42
user1805546

たぶん、scrollIntoViewを試してみてください。

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

これにより、エレメントまでスクロールします。

97
Aakash

スムーズなスクロールが必要な場合は、behavior設定を追加します。

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

以下のコードはあなたを助けるかもしれません

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

関数を追加します。

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

関数をトリガーします。

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

アンカータグでは、onclickではなくhrefを使用します

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

そしてdiv：

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

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

¹私は彼の答えにコメントするのに十分な評判を得ていません

1
anonQ