3

问题是我有一个带有锚点的网页，我想平滑滚动到它。于是我上网查了一下，找到了这段代码。

//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>

您还会看到我添加了第二类“链接”。这样我们就可以使用一个 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

添加两个 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 回答
0

您可以使用简单的功能，例如 

  scrollTo(x,y){
    let x1=0
    let y1=window.scrollY
    let yDiff=y-y1
    if(yDiff>10 || yDiff<-10){
      window.scrollTo(x,y1+(yDiff/10))
     setTimeout(()=>{
       this.scrollTo(x,y,smooth)
     },10)
   }
 }
于 2020-05-16T20:48:00.373 回答