2

3 つの div を含むページがあります。animate と各 div のオフセット位置を使用して、各 div をビューに表示したいと思います。リンク属性が渡され、オフセット番号を取得していることがわかります。( window.alerts で検証) 問題は、div コンテナーがビューに移動しないことです。

ここにリンクがあります

<div id="minibar" class="minibar">
<a href="#main" class="rarrow">Main</a>
<a href="#slide1" class="rarrow">Creative Showcase</a>
<a href="#slide2" class="rarrow">News</a>
</div>

コンテンツ div

<div id="main" class="main" ><content></div>
<div id="slide1" class="main"><content></div>   
<div id="slide2" class="main"><content></div>

コンテンツのCSS

.main{
      width:800px;
      padding:10px;
      color:#000;
      background:rgba(255,255,255,.85);
      height:405px;
      overflow:auto;
      position: relative;
      -webkit-border-radius: 20px;
  border-radius: 20px;
      -moz-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
      -webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
      box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
      text-shadow:none;
      margin-top:175px;
      font-weight:bold;
}

JS:

<script>
$(document).ready(function(){
   $('#minibar a').click(function(){
      var el = $(this).attr('href');
      var offset = $(el).offset();
      var top = offset.top - 100;
      $('body,html').animate({scrollTop:offset.top,scrollLeft:offset.left},500);
      return false;       
   });   
});
</script>
4

2 に答える 2

1 
var el = $( this.getAttribute('href') );

またはjQueryで：

var el = $( $(this).attr('href') );

LIVE DEMO

$(document).ready(function(){
   $('#minibar a').click(function( e ){
      e.preventDefault();
      var el = $( this.getAttribute('href') );
      var offs = el.offset();
      $('html, body').stop().animate({ scrollTop: offs.top-100 },500);    
   });   
});

あなたはtopvar を使用したことがありませんでした。なぜscrollLeft. 必要に応じて使用してください。

$('html, body').stop().animate({
    scrollTop: offs.top-100,
    scrollLeft: offs.left
},500);
于 2013-03-06T23:42:10.637 に答える
1

position:fixed; が見つかりました。スタイルシートでhtmlに設定しました。それを削除すると、アニメーションは設計どおりに機能しました。助けてくれてありがとう！

于 2013-03-07T11:09:54.470 に答える