前提・実現したいこと
colorboxを使ってポップアップを出しています。
ポップアップの中に元ページへのアンカーリンクを置いています。
見よう見まねで書いた背景固定の部分が上手く書けていないよう(?)で、アンカーリンクのリンクはきちんとアンカーの位置に移動するのですが、colorboxを普通に閉じた場合、ページのトップに戻ってしまいます。
普通に閉じた場合、ページのトップに戻らず、colorboxを開いたときのそのままの位置に戻りたいのでお知恵を拝借させてください。
該当のソースコード
html
1<div id="wrapper"> 2 <a class="inlineBox" href="#inline01">colorboxを開く</a> 3 <div style="display:none;"> 4 <div id="inline01"> 5 <a href="#anchor" class="close">アンカーリンクへ移動する</a> 6 </div> 7 </div> 8 . 9 . 10 . 11 12 <div id="anchor">リンク先</div> 13</div>
javascript
1 2var current_scrollY = $(window).scrollTop(); 3$(function() { 4 $(".inlineBox").colorbox({ 5 inline:true, 6 innerWidth: 600, 7 maxWidth:"90%", 8 maxHeight:"90%", 9 opacity: 0.7, 10 returnFocus:false, 11 onOpen:function(){ 12 current_scrollY = $(window).scrollTop(); 13 $('#wrapper').css({ 14 position: 'fixed', 15 width: '100%', 16 top: -1 * current_scrollY 17 }); 18 }, 19 onClosed:function(){ 20 $('#wrapper').attr({ style:''}); 21 } 22 }); 23 24 $('.close').on('click', function(e){ 25 e.preventDefault(); 26 $.colorbox.close(); 27 $('#wrapper').css({ 28 position: 'static', 29 }); 30 var position = $('#anchor').offset().top; 31 window.scrollTo(0,position); 32 }); 33});
試してみたこと
javascript
1onClosed:function(){ 2 $('#wrapper').attr({ style:''}); 3 $('html, body').prop({ scrollTop: current_scrollY }); 4}
colorboxのonClosedを上記のようにしたところ、ページのトップには戻らず、colorboxを開いたときのそのままの位置にきました。が、今度はアンカーリンクのほうがcolorboxを開いたときのそのままの位置にきてしまい、アンカーリンクのある位置にジャンプしません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。