###前提・実現したいこと
アンカーをクリックするとoverflow-x:scrollを適用したdiv要素内を目的のidのdiv要素までスクロールするようにしたいです。
###発生している問題・エラーメッセージ
div.mainの左端に各div.boxの左端がぴったりくるようにスクロールしてほしいのですがうまくいきません。
JSFiddle
###ソースコード
html
1<div class="nav"> 2 <a href="#1">1</a> 3 <a href="#2">2</a> 4 <a href="#3">3</a> 5 <a href="#4">4</a> 6 <a href="#5">5</a> 7</div> 8<div class="main"> 9 <div class="inner"> 10 <div id="1" class="box1">1</div> 11 <div id="2" class="box2">2</div> 12 <div id="3" class="box3">3</div> 13 <div id="4" class="box4">4</div> 14 <div id="5" class="box5">5</div> 15 </div> 16</div>
css
1.main { 2 overflow-x: scroll; 3 width: 150px; 4} 5 6.inner { 7 display: flex; 8 width: 500px; 9} 10 11.box1 { 12 background-color: red; 13 height: 100px; 14 width: 100px; 15} 16 17.box2 { 18 background-color: blue; 19 height: 100px; 20 width: 100px; 21} 22 23.box3 { 24 background-color: green; 25 height: 100px; 26 width: 100px; 27} 28 29.box4 { 30 background-color: yellow; 31 height: 100px; 32 width: 100px; 33} 34 35.box5 { 36 background-color: purple; 37 height: 100px; 38 width: 100px; 39}
javascript
1$(function(){ 2 $('a[href^=#]').click(function(e) { 3 e.preventDefault(); 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var position = target.position().left; 7 $('.main').animate({scrollLeft:position}, 'fast', 'swing'); 8 return false; 9 }); 10});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/24 06:41