3

問題は、アンカー付きの Web ページがあり、スムーズにスクロールしたいということです。そこで、オンラインで調べてみると、このコードが見つかりました。

//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,fa@7a.4a.LP+F7Jend8e66.cancelBubble=true;6.Value=fa@;}&&(E(7J8di=Hner3||5.G3;hN.3;a=(Ed>ah-d>i7e@{-(h-d)7}e@{a=a+(d-a}To(0,aEa==a}=aJHit8KwHdow,A,A7,A82P;l=9;d=locatiP;D&&D.HdexOfL#)!=-1&&(l/+l=C)Kl,Gck,endEl.PGck=2l=this.hash.substr(1E9.name==l;i=setILL+(9)+),107}}}}}};Hit()",b=48;while(b>=0)a=a.replace(new RegExp("%23456789@ACDEFGHJKLMNP".charAt(b),"g"),("\042Scroller.entfunction(offsetParscrollwindow.returndocumattachEvntervala=.getElemsByTagName(a);if(offsetTop){for(i=0;i<a.length;i++.pathnamea+=Math.ceil((d-ae.stopPropagationTopa.addEvListenerbody)/speede.prevDefaultclearI(i)pageYOffsetend(this);Height .Elemev)}:a[i]lseload=dl.href);b,dcliin},((.=.=C||on".split(""))[b--]);return a})())

これは私のすべてのウェブサイトで機能するので、新しいサイトでも機能すると信じていましたが、機能しませんでした. 誰でも理由がわかりますか???

これはHTMLです

<head>
<script src="smooth.pack.js" type="text/javascript"></script>
<script> Scroller.speed=7; </script>
</head>

それで

<body>
<a href="#bottom" id="down1" class="down" style="display:block"></a>

それからページの半分くらい。

<a name="bottom" id="bottom"></a>
</body>

リンク用のCSSです。

#down1 {
position:absolute;
width:100%;
height:50%;
top:50%;
cursor: url(d.png), auto;
z-index:99;
}

他のサイトで動作するのを見たので、これが動作することを知っています。しかし、何が問題なのかわからない???

どんな助けでも大歓迎です。

ありがとう

4

3 に答える 3

8

そのスクリプトを使用せず、jQuery を使用することをお勧めします。これは、jQuery を使用すると非常に簡単に実行できます。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <a href="#bottom" id="down1" class="down" style="display:block"></a>
  ....
  <a name="bottom" id="bottom"></a>
  <!-- load jquery however you like I will load from Google CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
    // Document ready shorthand statement
    $(function() {
      // Select link by id and add click event
      $('#down1').click(function() {

        // Animate Scroll to #bottom
        $('html,body').animate({
          scrollTop: $("#bottom").offset().top }, // Tell it to scroll to the top #bottom
          1000 // How long scroll will take in milliseconds
        );

        // Prevent default behavior of link
        return false;
      });
    });
  </script>
</body>
</html>

編集：

あなたのコードに問題が見つかりました。それはあなたのcssです。あなたのCSSには

html, body { overflow-x: hidden; }

これを次のように変更します。

body { overflow-x: hidden; }

また、コードが少なくなるように jQuery を作成する簡単な方法もあります。

まず、HTML を少し再構築する必要があります

リンク セクションで、リンク先の href をリンク先の div の id に変更します。次に例を示します。

<a href="#Portfoilio" class="link" id="down1" class="down" style="display:block"></a>

次のように変更されます。

<a href="#bottom" id="down1" class="down link" style="display:block"></a>

また、2 番目のクラスの「リンク」を追加したことがわかります。これは、1 回の jQuery 呼び出しでそれぞれをターゲットにできるようにするためです。

下部の jQuery は次のように変更されます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    // Document ready shorthand statement
    $(function() {
      $('.link').click(function() {
        var id = $(this).attr('href');
        $('html,body').animate({ scrollTop: $(id).offset().top }, 'slow');
        // Prevent default behavior of link
        return false;
      });
    });
</script>

HTML と jQuery を変更する方法へのリンクは次のとおりです: http://pastebin.com/0LfyjNLx

于 2012-07-25T04:20:01.110 に答える
0

スムーズなスクロールを行うための非常に簡単な方法を次に示します。jQuery と jQuery.localScroll プラグインを使用します。

最新の Smoothscroll.js をダウンロードします: https://github.com/flesler/jquery.localScroll/releases

2 つの JavaScript 参照を追加します。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/smoothscroll.js"></script>

次に、次のように、クラス「smoothScroll」を<a>リンクに追加してください。

<a href="#anchor1" class="smoothScroll">Jump to Page Location</a>
于 2014-11-12T19:19:56.443 に答える