Q&A
topとは、ページの一番上ということでよろしいですか？
ボタンを押すと１へスクロールさせたいです。
topに戻るjsにbodyやhtmlのセレクタが見当たらないので、どの部分を変更すればいいのか分かりません。
ご教授お願いします。
html
1<body> 2 <div id="scroll-one">1</div> 3 <button id="scroll-btn">１へスクロール</button> 4 <div id="top">top</div> 5</body>
js
1scrollTop("top",500); 2function scrollTop(elem,duration){ 3var target=document.getElementById(elem); 4target.addEventListener("click",function(){ 5var currentY=window.pageYOffset; 6var step=duration/currentY>1?10:100; 7var timeStep=duration/currentY*step; 8var intervalID=setInterval(scrollUp,timeStep); 9function scrollUp(){ 10currentY=window.pageYOffset; 11if(currentY===0){ 12clearInterval(intervalID); 13}else{ 14scrollBy(0,-step); 15} 16} 17}); 18}
説明不足ですみません。ページ内リンクにスクロールさせたいのですが、教本にはトップに戻るコードしか載っていませんでした。なのでそのコードを編集しようとしたのですが、どこを編集すればいいのか分からなかったので、質問させて頂きました。
実用するなら、http://kyasper.com/jquery-tips/ などを参考に作り直すことをすすめます。
回答3件
0
ご自身で作られているscrollTopというfnctionが、
第一引数に設定されたIDを持つ要素に対してトップにスクロールするイベントを登録するように作られているじゃないですか？
なので、
js
1scrollTop("top",500); 2scrollTop("scroll-btn",500); // ←これを追加
とするだけでいいのでは？
投稿2019/01/09 04:14
総合スコア280
0
ベストアンサー
「JavaScript スムーススクロール」で検索すると、以下のように実装サンプルが出てくるので、それを参考にされてはいかがでしょう。
【JavaScriptでスムーススクロールを実装 - Qiita】
https://qiita.com/junya/items/14d9b0828515f169e65e
【【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード | WEMO】
https://wemo.tech/1645
投稿2019/01/11 15:38
総合スコア69398
0
setintervalとかつかったことないのですが、このやりかただと、intervalidが事前には取得できないから、想定通りにはうごかない。
topなら最後0になるからいいですけど、途中だとうまくスクロール量を調整してあげないと、==にならないです。
とりあえず、scroll-btnというidのdivに対して、scroll-oneより上になるまでスクロールできるようなコードにはしてみた。
やりたかったのは、setintervalのときに、目的の場所をわたしてあげて、目的の場所をしっているスクロール関数を返すように作ってあげればいいと思ったこと。
html
1<html> 2<head> 3<script language="javascript"> 4// scrollTop("top",500,"bodytop"); 5// scrollTop("scroll-btn", 500, "scroll-one"); 6 function scrollTop(elem,duration, toElem){ 7 var target = document.getElementById(elem); 8 var upto = document.getElementById(toElem); 9 target.addEventListener("click",function(){ 10 var currentY=window.pageYOffset; 11 var step=duration/currentY>1?10:100; 12 var timeStep=duration/currentY*step; 13 var intervalID=setInterval(scrollUp(intervalID, upto.offsetTop),timeStep); 14 function scrollUp(intervalID, dest){ 15 return function() { 16 currentY=window.pageYOffset; 17 if(currentY<=dest){ 18 console.log("come"); 19 console.log(intervalID); 20 console.log(clearInterval(intervalID)); 21 clearInterval(intervalID); 22 }else{ 23 scrollBy(0,-step); 24 } 25 }; 26 } 27 }); 28 } 29</script> 30</head> 31 32<body id="bodytop" onload='scrollTop("top",500,"bodytop");scrollTop("scroll-btn", 500, "scroll-one");'> 33 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 34 <div id="scroll-one">1</div> 35 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 36 <div id="scroll-btn">１へスクロール</button> 37 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 38 <div id="top">top</div> 39</body> 40</html>
正直、おとなしく既存のライブラリとかでやったほうがいいと思います。
deprecated
ちゃんと読んでませんが、TOPに戻れていると仮定して、これで良いのでは？
html
1<button id="scroll-btn" onclick="scrollTop('scroll-one',500)">
投稿2019/01/09 03:50
編集2019/01/09 05:31総合スコア12705
質問者のコードは「#(パラメータ)」の要素に「クリックしたらトップに戻る」イベントをつけるだけのコードみたいです。
kei344様
ご指摘ありがとうございます。ご指摘に添ってコードを読みました。`scrollTop("top",500);`はトップにトップに戻る機能を付けているのですね。
回答ありがとうございます、自分で動かしてみて、一度試してみます。ご丁寧にコードまでありがとうございました。
あなたの回答
tips
プレビュー
