0

私は現在ウェブサイトに取り組んでおり、問題に遭遇しました。私はこれらすべてにかなり慣れていないので、簡単に修正できると確信しています。基本的に、ヘッダーのリンクをクリックすると、ページ上のポイントまでライブアニメーションスクロールが発生するonlickイベントを発生させるためにjavascriptを使用したいと思います。問題？ライブスクロールはありません。ジャンプするだけです。コードのスニペットを示します。ありがとう！

<head style="overflow-x: hidden">
    <title>Dupont Studios</title>
    <link href= 'style.css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <script>


        $(function() {
        // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        nav_container.waypoint({
        handler: function(direction) {
        nav_container.toggleClass('sticky', direction=='down');

        }
        });
        });

    </script>
    <script>
        $(".nav-item").on("click", function( e ) {

        e.preventDefault();

        $("body, html").animate({
        scrollTop: $( $(this).attr('href') ).offset().top
        }, 600);

        });
    </script>
</head>

<div id = 'nav-items-container'>
            <ul class = 'nav-items'>
                <li class = 'nav-item'><a href='#what'>what</a></li>
                <li class = 'nav-item'><a href='#how'>how</a></li>
                <li class = 'nav-item'><a href='#why'>why</a></li>
                <li class = 'nav-item'><a href='#where'>where</a></li>
                <li class = 'nav-item'><a href='#who'>who</a></li>
            </ul>
        </div>

ジャンプポイントの例:

 <div class = 'mark' id = 'how'></div>

動作しないjsでの別の試み

 $("a.nav-item").click(function() {
        $("html, body").animate({
        scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
        });
4

1 に答える 1

0

This Questionからの私の答えを試したが、設定が異なるため、うまくいきませんでした。したがって、これは機能します：

$("li.nav-item").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
    });

ポイントは、探している要素 #tag が LI 要素内の A 要素内にあるということです。Ypuはここでフィドルを見ることができます

編集済み

ドキュメントにかなりの数のエラーがあるため、 が機能していません。問題が発生した場合は、FF または Chrome Dev Tools (Console...) を開いて、何が問題なのかを確認してください。コード「waypoint」内にエラーがあり、読み込めません。とりあえずコメントしました。以下は魅力のように機能します。

<html>
<head style="overflow-x: hidden">
    <title>Dupont Studios</title>
    <link href= 'style.css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>


        $(document).ready(function(){
            /*Do our DOM lookups beforehand
            var nav_container = $(".nav-container");
            var nav = $("nav");
            nav_container.waypoint({
                handler: function(direction) {
                    nav_container.toggleClass('sticky', direction=='down');
                }
            });*/


            $("li.nav-item").click(function() {
                alert("ok");
                $("html, body").animate({
                    scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
                });
                return false;
            });
        });
    </script>
    <style type="text/css">
        .long_div{
            background-color: lightblue;
            min-height: 600px; 
            border: thin solid blue;
        }
    </style>
</head>
<body>
<div id = 'nav-items-container'>
            <ul class = 'nav-items'>
                <li class = 'nav-item'><a href='#what'>what</a></li>
                <li class = 'nav-item'><a href='#how'>how</a></li>
                <li class = 'nav-item'><a href='#why'>why</a></li>
                <li class = 'nav-item'><a href='#where'>where</a></li>
                <li class = 'nav-item'><a href='#who'>who</a></li>
            </ul>
        </div>


        <div id="what" class="long_div">
            What
        </div>
        <div id="how" class="long_div">
            How
        </div>
        <div id="why" class="long_div">
            Why
        </div>
    </body>
    </html>
于 2013-07-08T20:02:45.183 に答える