2

サイトでスムーズなスクロールを機能させようとして、いくつかの異なる jQuery プラグインで 2 時間苦労しました。

現在、関連するコードは次のとおりです。

<div class="row-fluid">
 <header class="span12 hero-unit">
 <ul class="thumbnails">
  <li class="span3"></li>
  <li class="span2">
   <a href="#Blog" class="thumbnail">
   <img src="images/nav_icon-01.png" alt="Blog"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Projects" class="thumbnail">
   <img src="images/nav_icon-02.png" alt="Projects"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Contact" class="thumbnail">
   <img src="images/nav_icon-03.png" alt="Contact"/>
   </a>
  </li>
  <li class="span3"></li>

 </ul>
 </header>
</div>

これは実際には機能しているように見えますが、ページの読み込み時にのみアクティブになり、クリックで機能させることが可能かどうかを知るために。

<script type="text/javascript">
$('html, body').animate({
scrollTop: $("#Blog").offset().top
}, 2000);
</script>
4

2 に答える 2

1

このプラグインはわかりませんが、機能に基づいて、次のようなものです（最近のJQueryを想定）：

$('a.thumbnail').on('click', function() {
  var to = $(this).attr('href'); // $(this) is the clicked link. We store its href.
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
)};

JQuery が 1.7 未満の場合は、JQuery のバージョンに関係なく動作する .click() を試すことができます。

$('a.thumbnail').click(function() {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
});
于 2013-02-24T18:31:37.707 に答える
1

次のようにブラウザーのデフォルトのアクションを防止しない限り、かなり大きなちらつきが発生することを除いて、mddw が言及したことは機能します (また、彼の終了中かっこの順序が間違っていました)。

$('a.thumbnail').on('click', function(event) {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 500);
  event.preventDefault();
});
于 2013-04-15T01:00:54.140 に答える