質問編集履歴

2 実装コードを追記

kukuvon

kukuvon score 13

2017/01/24 12:16  投稿

固定表示されているボタンで、前後のセクションにスクロールさせたい。
[https://teratail.com/questions/9525](https://teratail.com/questions/9525)
こちらの実装に加え
・一つ前のセクションに「戻る」ボタンを追加
・「戻る」「進む」共に、連続して次々動かす(現状だと、1度クリックした後多少スクロールしないと動かない)
・最初のセクションに差し掛かったら「戻る」を、最後のセクションでは「進む」を、それぞれ非表示に  
これらの要素を実装したいと考えております。
ご助力いただければ幸いです。
```jquery
$(function(){
   var idx = -1;
   var idxB = +1;   
   var sectionPos = 0;
   var scrollTop = 0;
   var targetTop = 0;   
   $(window).on("load scroll", function(e){
       $(".section").each(function(index, ele){
           sectionPos = $(ele).offset().top;
           scrollTop = $(window).scrollTop();
           if(sectionPos > scrollTop){
               idx = index-1;
               idxB = index+1;
               return false;
           }
       });
   });
   $(".prev").on("click", function(e){
       if($(".section").eq(idx).is("*") && idx >= 0){
           targetTop = $(".section").eq(idx).offset().top;
           $("html, body").animate({scrollTop:targetTop}, "normal");
       }else{
           $(this).hide;
       }
       return false;
   });
   $(".next").on("click", function(e){
       if($(".section").eq(idxB).is("*") && idxB >= 0){
           targetTop = $(".section").eq(idxB).offset().top;
           $("html, body").animate({scrollTop:targetTop}, "normal");
       }
       return false;
   });
});   
```
「戻る」ボタンを'.prev'、「進む」ボタンを'.next'として上記のように組んだところ、実装したい挙動は実現できたのですが、最初の'.section'よりさらに上のスクロール位置で'.next'をクリックすると、2つ目の'.section'まで一気に飛んでしまいます。
原因・快活方法など思い当たる方いらっしゃいましたら、ご教授願いたいです。
  • JavaScript

    30948 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11731 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 リンク修正

kukuvon

kukuvon score 13

2017/01/23 12:57  投稿

固定表示されているボタンで、前後のセクションにスクロールさせたい。
https://teratail.com/questions/9525
[https://teratail.com/questions/9525](https://teratail.com/questions/9525)
こちらの実装に加え
・一つ前のセクションに「戻る」ボタンを追加
・「戻る」「進む」共に、連続して次々動かす(現状だと、1度クリックした後多少スクロールしないと動かない)
・最初のセクションに差し掛かったら「戻る」を、最後のセクションでは「進む」を、それぞれ非表示に
これらの要素を実装したいと考えております。
ご助力いただければ幸いです。
  • JavaScript

    30948 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11731 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る