###前提・実現したいこと
下記のソースについて質問です。#Area1内にあるアンカータグをクリックすると画面が
「#Area2」と「#Area3」へスクロールするのですが、 スクロールをすると一瞬だけスクロール先の画面が出てきてしまいます。
アンカーにスクロール先の#Area2を指定しているからなのですが、jqueryでスクロールできるので、この元々のhtmlの機能を消したいのですがどのような方法で消すことが出来るのでしょうか。
###該当のソースコード
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 10position = $('#Area2').offset().top; 11console.log('#Area2の長さ:', position); 12 }).trigger('resize'); 13 14 $('#Area1 a').on('click', function() { 15 $('html,body').animate({ 16 scrollTop: position 17 18 }, { 19 queue : false, 20 duration: 3000 21 }); 22}); 23});
html
1<body> 2 3<div id="Area0"> 4</div> 5<div id="Area1"> 611111111111111111 7 8<a href="#Area2">scroll</a> 9 10 11</div> 12<div id="Area2"> 132222222222222222 14</div> 15<div id="Area3"> 163333333333333333 17</div> 18 19</body>
css
1@charset "UTF-8"; 2 3#Area0 { 4 background: gray; 5 width: 100%; 6 height: 70px; 7 position: fixed; 8 top: 0; 9 left: 0; 10 z-index: 1; 11 opacity: 0.2; 12} 13#Area1 { 14 background: lightpink; 15 width: 100%; 16 position: fixed; 17 opacity:0.7; 18 z-index: 0; 19} 20#Area2 { 21 background: blue; 22 width: 100%; 23 height: 450px; 24 position: relative; 25 /*opacity: 0.3;*/ 26} 27#Area3 { 28 background: green; 29 width: 100%; 30 position: relative; 31 height: 450px; 32 /*opacity: 0.3;*/ 33} 34
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。