3

私は1ページのウェブサイトを開発しています。これまでのところ、「垂直スムーズスクロール」機能（HOME、ABOUT、GALLERY ...ナビゲーションリンク用）の実装に成功しており、うまく機能しています。

ここで、同じ Web サイトに別の jquery を追加したいと考えました。これは、ナビゲーションを容易にするために右下隅に表示される小さな「スクロールアップ」ボタンです。問題は、それが決して現れないということですか？

これが私がこれまでに行ったことです：

HTML:

<a class="scrollup" href="#">Scroll</a>

CSS:

.scrollup {
  height: 38px;
  width: 38px;
  opacity: 1.0;
  position:fixed;
  bottom: 35px;
  right: 35px;
  background: url(images/top.png) no-repeat;
}

JQUERY (scrollup.js ドキュメントを開き、このコードを内部に追加しました):

// scroll-to-top button show and hide
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        if (jQuery(this).scrollTop() > 100) {
            jQuery('.scrollup').fadeIn();
        } else {
            jQuery('.scrollup').fadeOut();
    }
});
// scroll-to-top animate
jQuery('.scrollup').click(function(){
    jQuery("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

これらのスクリプトも HTML ヘッダーに追加しました。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
    <script type='text/javascript' src='scrollup.js'></script>
    <script type='text/javascript' src='verticalsmoothscrolling.js'></script>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>

それでも、垂直方向の滑らかなスクロールは正常に機能していますが、「スクロールアップ」ボタンは表示されませんか??? この質問の一番下にあるスクリプトの順序は重要ですか? それとも別のものですか？皆さんがこれを解決するのを手伝ってくれることを願っています. ありがとう:)

4

1 に答える 1

1

ファイルが適切にロードされ、スクロール イベントが適切に発生した場合、このスクリプトは機能します ( jsFiddle )。これは、次の 3 つのいずれかを意味します。

  1. スクリプトが正しくロードされていません。開発者コンソールに 404 エラーに関連するエラーが表示されるはずです。

  2. このスクリプトのリソースが正しく読み込まれていません。スクリプトの前に jQuery を適切に含めるため、これは当てはまらないようです。これにより、通常、開発者コンソールにエラーがポップアップ表示されます: referenceError ($ is not definedまたはjQuery is not defined) またはblahblah is not a functionblahblah は呼び出した関数です。

  3. スクロール イベントは発生しません。スクロールの「外観」を変更する他のスクリプトがあるため、これが当てはまる可能性があります。

    このスクリプトが 1wheelつまたは複数のDOMMouseScrollイベントにハンドラーをアタッチし、デフォルト アクションを防止する場合、スクロール イベントは決して発生しません。これがどのように機能するかは、この質問にあります。

    スクロール イベントが呼び出されたかどうかを確認するには、スクロール イベントにハンドラーをアタッチし、コンソールに何かを記録します。コンソールをチェックして、そこに何かが記録されているかどうかを確認します。

    $(window).on( 'scroll', function() {
  console.log( 'The scroll event fired!' );
} );

    スクロール イベントが発生しない場合は、wheel( docs ) および/またはDOMMouseScrollイベント ( docs )でスクロール イベントをトリガーすることにより、これを「修正」できます。

    function triggerScroll() {
  $( window ).trigger( 'scroll' );
}

jQuery.on( 'wheel', triggerScroll );
jQuery.on( 'DOMMouseScroll', triggerScroll );
于 2013-08-25T15:47:27.007 に答える