1

外部ファイルに入れたいこの短いJavascriptコードがあります。その理由は、それを使用する.htmページが多数あるためです。したがって、すべてのファイルにすべてインラインで配置するのではなく、外部ファイルに配置したいと思います。

しかし、問題は、それが機能しないということです。スクリプトは基本的に「トップに戻る」ボタンです。スクリプトをファイルに入れると、問題なく動作し.htmます。ちなみに、.htmファイルをにロードしていますがDiv、問題が発生する可能性がありますか？編集：ファイルは.load()jQuery関数を介してロードされます。

スクリプトをインラインに入れてみましたindex.htmlが、そこでも機能しません。

コードは次のとおりです。

$('.backtotopwrapper').click(function(){
  $('body,html').animate({scrollTop: "0px"},1500);
});

更新：他の.jsコードと、.htmファイルの動作とは関係のないコードをテストしました。.htm内の要素に固有のコードは、機能しない唯一のコードです。

4

2 に答える 2

3

OK、3つのファイル：

  • main.html
  • loremIpsum2.html
  • myScroll.js

1）。main.htmlでは、jQueryとmyScroll.js の外部ファイルを呼び出します。また、jQueryを使用してloremIpsum2.htmlのコンテンツを配置する空のラッパーdiv（<div id="loader"></div>）があります。.load()

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>link to external js file</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="myScroll.js"></script>
  <script>
  /* <![CDATA[ */
   $(document).ready(function() {
     $("#loader").load("loremIpsum2.html");
   }); // ready​​​
  /* ]]> */
  </script>
 </head>
 <body>
  <div id="wrap">
   <div id="loader"></div>
  </div><!--wrap-->
 </body> 
</html>

2）。loremIpsum2.htmlにはたくさんの段落がありますが、最後にボタンがあります。

<a class="backtotopwrapper" href="javascript:;">go to top</a>

3）。myScroll.jsには、スクロールボタンの機能があります。

$(function () {
    $('body').on("click", ".backtotopwrapper", function () {
        $('body,html').animate({
            scrollTop: 0
        }, 1500);
    });
});

ボタンが経由しているファイルをロードしているので、委任された形式で.load()使用しています。.on()

DEMOを参照して、ソースコードを自由に調べてください。

注：.on()jQueryv1.7+が必要です

于 2013-03-26T00:42:38.373 に答える
1

私は同じ問題を抱えていましたが、ここで説明した解決策を実行しませんでした。外部スクリプトが機能していなくても、同じコードが内部で機能しているときに、何が機能するのかを実際に発見しました。

外部スクリプトファイル名からスペース/特殊文字を削除するだけです。たとえば、「admin-script.js」と呼ぶ代わりに、ハイフンなどの特殊文字を使用せずに「adminscript.js」と呼び、新しい名前でスクリプトを参照します。それだけです、それは私のために働きました。

于 2017-03-07T14:14:02.447 に答える