2

これまでにchromeとffを使用すると、scrollTo関数を使用するときに厄介な問題が発生しましたか? これが起こらないようにする方法を知っている人はいますか?
ライブコード

HTML

 <ul class="wrapper">
    <li class="listItem"><img src="asset/img/logo.png" ></li>
    <li class="listItem"><a onclick="scrollTo('#container',500);" href="#">Company</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('.flexslider-container',500);" href="#">Service</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#map',500);" href="#">Map</a><span> / </span></li>
    <li class="listItem"><a onclick="scrollTo('#footer',500);" href="#">Contact</a></li>
    <li class="listItem">
      <p>250-610-9100</p>
    </li>
  </ul>

脚本

<script type="text/javascript">
function scrollTo(o, s) {
    var d = $(o).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: d
    }, s);
}
</script>
4

2 に答える 2

5

コードを属性.on()に押し込むのではなく、を介してイベントを添付する必要があります。onclick

(より)適切な解決策は、リンクを提供することですclass

<a href="..." class="menu-link">...</a>

そして、いくつかの派手なdata属性:

<a href="..." class="menu-link" data-target="#container" data-duration="500">...</a>

そして、あなたのコードにこれを追加してください:

$(document).ready(function() {
  $('.menu-link').on('click', function(event) {
    event.preventDefault();  // <---- This is the magic stuff

    scrollTo($(this).data('target'), $(this).data('duration'));
  });
});

.data()基本的に、jQuery の関数で読み取ることができる特別な属性を要素に与えます。次に、各リンクに関数呼び出しを追加する代わりに、1 つの魔法の関数をすべてのリンクに追加します。


現在のコードを保持したい場合 (ええ)、すべての属性return false;の最後に追加するだけです:onclick

<a onclick="scrollTo('.flexslider-container',300);return false;" href="#">Service</a>

これにより、デフォルトのアクション (ページの上部へのスクロール) が発生しなくなります。

最初の解決策をお勧めします。jQuery をその潜在能力の 3 分の 1 しか使用していない場合、jQuery を正当に評価しているとは言えません。

于 2012-06-14T05:46:01.157 に答える
0

.stop()アニメーション キューをクリアするために使用します

function scrollTo(o, s) {
        var d = $(o).offset().top;
        $("html:not(:animated),body:not(:animated)").stop().animate({
            scrollTop: d
        }, s);
    }

アンカーについて話すときは、次を使用してデフォルトのアンカーの動作を防止する必要がありますpreventDefault()

$('.wrapper a').on('click', function(e){
    e.preventDefault();
});
于 2012-06-14T05:50:53.840 に答える