2

私は JavaScript の初心者で、これはばかげた質問かもしれませんが、Web ページの特定の要素にスライドする単純な JavaScript 関数を作成しました。コードは次のとおりです。http://jsfiddle.net/bhbTr/

ただし、javascript と html を 1 つの html ファイルに入れようとすると、うまくいかないようです。ここに私が持っているものがあります:

<head>
    <title>Test</title>
    <link rel='stylesheet' id='css' href='style1.css' type='text/css' media='all'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">>
    function goToByScroll(id){
          // Remove "link" from the ID
            id = id.replace("link", "");
            var off = $("#"+id).offset().top - 50;
          // Scroll
            $('html,body').animate({
                scrollTop: off},
                'slow');
        }

    $("#navbar > ul > li > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
        goToByScroll($(this).attr("id"));           
        });

    $("#navbar > a").click(function(e) { 
          // Prevent a page reload when a link is pressed
            e.preventDefault(); 
          // Call the scroll function
            goToByScroll($(this).attr("id"));           
        });
</script>
</head>

<body>
    <!-- Begin Wrapper -->
    <div id="wrapper">
        <div class="navbar" id="navbar">
            <a href="#" id="WhoWeArelink" class="navbarlogo">Test</a>
            <ul>
                <li><a id = "WhoWeArelink" href="#">Who We Are</a></li>
                <li><a id = "WhatWeDolink" href="#">What We do</a></li>
                <li><a id = "OurWorklink" href="#">Our Work</a></li>
                <li><a id = "Contactlink" href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="contentcontainer">
            <div class="WhoWeAre" id="WhoWeAre">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="WhatWeDo"id="WhatWeDo">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="OurWork" id="OurWork">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="Contact" id="Contact">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
</div>
<!-- End Wrapper -->
<!-- Begin Footer -->
<div class="footer">
        <p style="text-align:center;">Some bullshit copyright (c) insert year here</p>
</div>
<!-- End Footer -->
</body>

何が間違っていたのかわかりませんが、リンクによって関数が呼び出されていないことに関係があると思われます。誰か提案があれば本当に感謝します

4

2 に答える 2

2

あなたがしなければならないことが2つあります。まず、2番目のスクリプトタグの余分な閉じ括弧を外します。

次に、JavaScriptコードをラップして、ドキュメントの準備ができた状態で実行されるようにします。jQueryを使用しているため、次のコードスニペットを使用します。

<script type="text/javascript">
$(function() {
    function goToByScroll(id){
        // Remove "link" from the ID
        id = id.replace("link", "");
        var off = $("#"+id).offset().top - 50;
        // Scroll
        $('html,body').animate({
            scrollTop: off},
            'slow');
    }

    $("#navbar > ul > li > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });

    $("#navbar > a").click(function(e) { 
        // Prevent a page reload when a link is pressed
        e.preventDefault(); 
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
    });
});
</script>

あなたのコードを改善するために私がしなければならないいくつかの提案があります。私はそれを単純に保ち、これらの2つのことを行います。

まず、クリックハンドラーを単一のコンマ区切りセレクターと組み合わせることができます。次に、this.idを使用してクリック関数の要素からIDを取得できます。id属性にアクセスするためにjQuery関数を使用する必要はありませんthis。クリックハンドラー内でキーワードが表すHTML要素で直接使用できます。

$("#navbar > ul > li > a, #navbar > a").click(function(e) { 
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

JavaScriptの変更を示すためにjsFiddleをフォークしました（スクリプトタグの修正はありません）：jsFiddle

お役に立てば幸いです。

于 2013-03-08T04:21:42.727 に答える
0 
<script type="text/javascript">>

最後に余分なアングルブラケットがあります。

于 2013-03-08T04:20:02.460 に答える