単純なナビゲーションボタン - WIndowScrollBy配列からの座標

私はページを異なる位置にスクロールさせる固定位置ボタンを持っています。これらの位置はアレイから来るでしょう。単純なナビゲーションボタン - WIndowScrollBy配列からの座標

私はこれを試しましたが、動作させることができません。誰かが私が間違ってやっていることを教えてもらえますか？ありがとう！

<script> 
 

 
var hor = ['300','300','300']; 
 
var ver = ['300','300','300']; 
 

 
for (i = 0; i < hor.length; i++) {hor[i];} 
 

 
for (i = 0; i < ver.length; i++) {ver[i];} 
 

 
function scrollWin(){window.scrollBy(hor[i], ver[i]);} 
 

 
</script>

<html> 
 
<body style="width: 20000px; height:20000px;"> 
 

 
<button style="display: block; cursor: pointer; position: fixed; top: 100px; left: 10px; width: 200px; height: 50px; border: 2px solid blue; color: white; background-color: #4090ee;" onclick="scrollWin();"/>Scroll 
 
</button> 
 

 
<div style="position: absolute; top:400px; left:400px;width:400px;height:400px;background-color:orange;"> 
 
REFERENCE 
 
</div> 
 
    
 

 
</body> 
 
</html>

出典

2016-07-06 humble beginner

私は、forループ行うことになっているかわかりません。それらをすべて連続して実行しようとしていますか？ボタンをクリックするたびに300ずつスクロールするようにコードを修正しました。

var hor = ['300','300','300']; 
 
var ver = ['300','300','300']; 
 

 
var i = 0; 
 

 
function scrollWin(){ 
 
    var s = i % 3; 
 
    window.scrollBy(hor[s], ver[s]); 
 
    i++; 
 
}

<html> 
 
<body style="width: 20000px; height:20000px;"> 
 

 
<button style="display: block; cursor: pointer; position: fixed; top: 100px; left: 10px; width: 200px; height: 50px; border: 2px solid blue; color: white; background-color: #4090ee;" onclick="scrollWin();"/>Scroll 
 
</button> 
 

 
<div style="position: absolute; top:400px; left:400px;width:400px;height:400px;background-color:orange;"> 
 
REFERENCE 
 
</div> 
 
    
 

 
</body> 
 
</html>

出典

2016-07-06 18:52:33 BrianR

ありがとうございます！はい、それは私が望んでいたのと同じように動作しているようです - ループは最後の配列位置からスクロールを新たに開始することでした。このアイデアは、固定されたスクリーン位置に1つのボタンだけを置くことです。これは、異なる高さと幅のページを横切って、垂直と水平の両方のナビゲーション体験でユーザーを連れて行きます。終わりのない円。私はあなたのソリューションをテストしますが、私はあなたがそれを解決したと思う、ありがとう！私はちょうどあなたのコードで％3が理解できません、あなたはそれについて私に啓発できますか？ –

'％'はモジュロ演算子です。それはあなたが望むループを与える操作の残りを取ります。 i = 4の場合、i％3 = 1. I.E。 4/3の残りの部分は1です。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder – BrianR

ああ、一つのことを尋ねるのを忘れていました：可能でしょうかスクロールをスムーズにするには？（私はスクロールのための "遅い"オプションを読んだが、どこに挿入するのかわからない...あなたを困らせてすみませんが、私は初心者で、2分間試していたこの日に熟達するのは簡単ではありません....）。 –

単純なナビゲーションボタン - WIndowScrollBy配列からの座標

答えて

関連する問題