javascript - Smooth scroll won't work, why?

The issue is I have a web page with a anchor, I want to scroll smoothly to it. So I looked around on-line and found this code.

//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,[email protected]+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})())

So this works on all of my websites, so I believed it would work on my new site, BUT it did not work. Can anyone see why not???

This is the HTML

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

Then

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

Then about half way down the page.

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

This is the CSS for the link.

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

So I know this does work, because I have seen it work on other sites. But not sure what the issue is???

Any help is appreciated.

Thanks

The issue is I have a web page with a anchor, I want to scroll smoothly to it. So I looked around on-line and found this code.

//dezinerfolio
eval((function(){a="Scroller={speed:10,8dC.;d.while(dC.+C.}} J8N;d=5;&&M4M}d&&dM4dM}%4%} 0J8a,F4(F,[email protected]+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})())

So this works on all of my websites, so I believed it would work on my new site, BUT it did not work. Can anyone see why not???

This is the HTML

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

Then

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

Then about half way down the page.

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

This is the CSS for the link.

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

So I know this does work, because I have seen it work on other sites. But not sure what the issue is???

Any help is appreciated.

Thanks

Share Improve this question edited Jul 25, 2012 at 4:39 Cheran Shunmugavel 8,4691 gold badge35 silver badges40 bronze badges asked Jul 24, 2012 at 14:01 williamchanter 1691 gold badge5 silver badges13 bronze badges

5 Ouch! Whereever you found this one, throw it away and use one without eval. – Bergi Commented Jul 24, 2012 at 14:05
Can you see any Error in console? – Tamil Commented Jul 24, 2012 at 14:41
No I don't get any errors, just it doesn't work. – williamchanter Commented Jul 24, 2012 at 17:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

I would remend not using that script and using jQuery. This can be done very easily with 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./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>

EDIT:

Ok found the problem with your code, it is your css. In your css you have

html, body { overflow-x: hidden; }

change that to this:

body { overflow-x: hidden; }

Also there is an easier way to write your jQuery so that it is less code.

first you will need to restructure your HTML a little

In your link section change the href of you links to the the id of the div you want them to link to, for example:

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

would change to:

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

also you will see i added a second class "link". This is so we can target each with one jQuery call.

and your jQuery at bottom would change to this:

<script src="https://ajax.googleapis./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>

Here is a link to how i change your HTML and jQuery: http://pastebin./0LfyjNLx

Here's a super-simple way to do the smooth scrolling. Use jQuery and the jQuery.localScroll plugin.

Download the latest smoothscroll.js: https://github./flesler/jquery.localScroll/releases

Add the two javascript references:

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

Then make sure to add the class "smoothScroll" to your <a> links, like this:

<a href="#anchor1" class="smoothScroll">Jump to Page Location</a>

You can use simple function like

  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)
   }
 }

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Smooth scroll won't work, why? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)