スクロール/ jQueryを使わないidへのジャンプ

私は、使用可能なソリューションについて多くのトピックを検索しています。
しかし、何かが見つかりませんでした。ほとんどのスクリプトは、私の目的のためにあまりにも混乱しています。
Javascriptのみに基づくソリューションを求めています。 私のプロジェクトでは、jQueryを使用することはできません。
私はidにジャンプまたはスクロールが必要です。
スクロール/ jQueryを使わないidへのジャンプ

<head> 
<script type="text/javascript"> 
//here has to go function 
</script> 
</head>

MYコールは次のとおりです。

<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アンカーは、残念ながら動作しません。そうしなければ、すべてがかなり簡単になります。

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

をしかし、私は、イーベイでの制限があります。

私は使用を持っているが、単純にbevore。彼らはこの単純なコードを許可しません。

また、私は外部のjavascriptを呼び出すことはできません（ヘッド領域のJSのみを使用します）。さらに、「cookie」、「cookie」、「replace（」、「IFRAME」、「META」または「includes」）およびベース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>

出典

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

あなたはすでにアンカータグを使用しています。 – Rusty

はあなたが

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

出典

2012-11-07 09:37:30 Oxi

'objControl.scrollTop'ではなく' document.body.scrollTop'でしょうか？ –

@Oxi var私はヘッドエリアに設置し、onclickは私が使用していますか？ – user1805546

onclickリスナーの@ user1805546は、 'target1'のようにdivのIDを使用します。 – Oxi

たぶん、あなたはのscrollIntoViewを試してみてくださいに役立つかもしれません。

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

これは要素にスクロールします。

出典

2014-05-02 07:05:08 Aaki

ちょうどメモ： 'id'を使うときは、'＃ '記号を前に付けないように注意してください。たとえば、IDが 'myDiv'のdivにジャンプする場合、コードは次のようになります：' document.getElementById（ 'myDiv'）。scrollIntoView（）; ' – Devner

これは実験的な機能です。現在の時刻 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView –

これはクロームで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へのジャンプ

答えて

関連する問題