teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

変更

2019/01/09 05:31

投稿

papinianus
papinianus

スコア12705

answer CHANGED
@@ -1,3 +1,57 @@
1
+ setintervalとかつかったことないのですが、このやりかただと、intervalidが事前には取得できないから、想定通りにはうごかない。
2
+ topなら最後0になるからいいですけど、途中だとうまくスクロール量を調整してあげないと、`==`にならないです。
3
+
4
+ とりあえず、scroll-btnというidのdivに対して、scroll-oneより上になるまでスクロールできるようなコードにはしてみた。
5
+ やりたかったのは、setintervalのときに、目的の場所をわたしてあげて、目的の場所をしっているスクロール関数を返すように作ってあげればいいと思ったこと。
6
+
7
+ ```html
8
+ <html>
9
+ <head>
10
+ <script language="javascript">
11
+ // scrollTop("top",500,"bodytop");
12
+ // scrollTop("scroll-btn", 500, "scroll-one");
13
+ function scrollTop(elem,duration, toElem){
14
+ var target = document.getElementById(elem);
15
+ var upto = document.getElementById(toElem);
16
+ target.addEventListener("click",function(){
17
+ var currentY=window.pageYOffset;
18
+ var step=duration/currentY>1?10:100;
19
+ var timeStep=duration/currentY*step;
20
+ var intervalID=setInterval(scrollUp(intervalID, upto.offsetTop),timeStep);
21
+ function scrollUp(intervalID, dest){
22
+ return function() {
23
+ currentY=window.pageYOffset;
24
+ if(currentY<=dest){
25
+ console.log("come");
26
+ console.log(intervalID);
27
+ console.log(clearInterval(intervalID));
28
+ clearInterval(intervalID);
29
+ }else{
30
+ scrollBy(0,-step);
31
+ }
32
+ };
33
+ }
34
+ });
35
+ }
36
+ </script>
37
+ </head>
38
+
39
+ <body id="bodytop" onload='scrollTop("top",500,"bodytop");scrollTop("scroll-btn", 500, "scroll-one");'>
40
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
41
+ <div id="scroll-one">1</div>
42
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
43
+ <div id="scroll-btn">1へスクロール</button>
44
+ <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
45
+ <div id="top">top</div>
46
+ </body>
47
+ </html>
48
+ ```
49
+
50
+ 正直、おとなしく既存のライブラリとかでやったほうがいいと思います。
51
+
52
+ ---
53
+ deprecated
54
+
1
55
  ちゃんと読んでませんが、TOPに戻れていると仮定して、これで良いのでは?
2
56
  ```html
3
57
  <button id="scroll-btn" onclick="scrollTop('scroll-one',500)">