質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4136閲覧

ブラウザの大きさを変えるとカクカクしながらスクロールしてしまう

aaaaaaaa

総合スコア501

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/04/06 11:36

編集2016/04/07 11:06

###前提・実現したいこと
下記のソースについて質問です。#Area1内にあるアンカータグをクリックすると画面が
「#Area2」と「#Area3」へスクロールするのですが、
スクロールをする前にブラウザの大きさを変更すると、変更する前と比べ円滑にスクロールしなくなりカクカクしながらスクロールしてしまいます。なぜ、ブラウザの大きさを変えるとカクカクするようになるのでしょうか。
また、アンカーのhrefは、#Area2で最適なのでしょうか。
###該当のソースコード

html

1<!-- 最上部 --> 2<div id="Area0"> 3 4</div> 5<!-- ★ブラウザの大きさと連動するボックス(ファーストビュー) --> 6<div id="Area1"> 711111111111111111 8 9<a href="#Area2">scroll</a> 10 11 12</div> 13<div id="Area2"> 142222222222222222 15</div> 16<div id="Area3"> 173333333333333333 18</div>

css

1#Area0 { 2 background: gray; 3 width: 100%; 4 height: 70px; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 1; 9} 10#Area1 { 11 background: lightpink; 12 width: 100%; 13 position: fixed; 14 z-index: 0; 15} 16#Area2 { 17 background: blue; 18 width: 100%; 19 height: 450px; 20 position: relative; 21} 22#Area3 { 23 background: green; 24 width: 100%; 25 position: relative; 26 height: 450px; 27} 28

javascript

1$(function() { 2 $(window).on('resize', function() { 3 var h = $(window).height(); 4 $('#Area1').css({'height': h, 'margin-top': 70}); 5 console.log('高さ:',h); 6 7 $('#Area2').css('top', h); 8 $('#Area3').css('top', h); 9 10//■スクロールボタン 11var position = $('#Area2').offset().top; 12console.log('#Area2とブラウザの幅:', position); 13$('#Area1 a').on('click', function() { 14 $('html,body').animate({ 15 scrollTop: position 16 }, { 17 queue : false, 18 duration: 3000 19 }); 20}); 21 }).trigger('resize'); 22 23}); 24

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

今提示されているコードだと
$(window).on('resize',fun()){…}の中にスクロールのイベントが入っています。
かつ、.on()でclickイベントを付けている為
ウインドウがリサイズされる度に$('#Area1 a')に対してclickイベントが追加される
という状態です。

試しに$('#Area1 a').on('click', function() { の中にconsole.logを仕込んでみてください。
ウインドウを一度リサイズした後に#Area1 aをクリックするとconsoleに同じメッセージが複数出力されているのではないでしょうか?

カクついている原因はanimate({scrollTop: position})がこの追加された回数呼び出されている為と考えられます。

以上を踏まえて

  1. スクロールボタンに該当するコードを$(window).on('resize',fun()){…}から出して$(function)(){…}直下に移動させてみましょう。(変数のpositionも)
  2. $(window).on('resize',fun()){…}内にposition = $('#Area2').offset().top;を追記

これでカクつきが消えるのではないでしょうか?

投稿2016/04/07 11:34

manabufukai

総合スコア700

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

本当に可能ならでいいんですが、上の該当する部分を1枚のhtmlにしてコピペして貼っていただくことは可能でしょうか。

投稿2016/04/07 11:11

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問