-1

To start off, here's index.html

<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="stuff.css"/>
    </head>
    <body>


         <div class=passage>

<h1>Getting Started</h1>
            <p>
                To get started, click one of the <a href="#" class="scrollup">four buttons</a> that are above. Each button will take you to its appropriate page. 
            </p><br>

            <h1>Questions/Concerns</h1>
            <p>
                If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page.
            </p><br>


        </div>


        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </body>
</html>

Here's stuff.css

.passage {
    margin-top: 40px;
    margin-left: 200px;
    margin-right: 200px;
    border-radius: 25px;
    float: left;
    height: 1000px;
}

.passage p{
    margin-left: 10px;
}

.passage h3{
    font-style: bold;
}

.scrollup {

}

And here is stylescripts.js

<!DOCTYPE HTML>
<html>
    <body>
        <script>
$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});
</script>
</body>
</html>

So what I'm trying to do is make it so that when I press "four buttons" in index.html, the index.html page will scroll to the top smoothly. Unfortunately this doesn't happen, and it just teleports to the top with no slow movement. I'm pretty nooby when it comes to javascript so I thought I'd ask here: what am I doing wrong that I can't get smooth scroll movement to the top when I click "four buttons"?

Thanks all, appreciate it.

john
  • 139
  • 1
  • 8
  • possible: http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link – Jeremy Rajan Jan 15 '16 at 03:47
  • You `stylescripts.js` should contain only `script`.. why it has `html` included? Its invalid.. and you haven't referred your `stylescripts.js` anywhere in your `html`... So don't expect animation to happen.. – Guruprasad J Rao Jan 15 '16 at 03:49

1 Answers1

0

It works when you write stylescripts.js properly.

I tried to copy your javascript code to html file like the following and it works properly. (for checking purpose, I added some elements on html.)

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" type="text/css" href="stuff.css"/>
    </head>
    <body>


         <div class=passage>

          <h1>Getting Started</h1>
            <p>
                To get started, click one of the four buttons that are above. Each button will take you to its appropriate page. 
            </p><br>

            <h1>Questions/Concerns</h1>
            <p>
                If any questions come to mind, please visit the <a href="help.html">help</a> page. Likewise, if one has any specific questions or concerns regarding the data, website, etc., please visit the <a href="contact.html">contact</a> page.
            </p><br>


        </div>
        <div>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <p>:</p>
          <a href="#" class="scrollup">four buttons</a>
        </div>

        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script>
          $(document).ready(function () {

              $(window).scroll(function () {
                  if ($(this).scrollTop() > 100) {
                      $('.scrollup').fadeIn();
                  } else {
                      $('.scrollup').fadeOut();
                  }
              });

              $('.scrollup').click(function () {
                  $("html, body").animate({
                      scrollTop: 0
                  }, 600);
                  return false;
              });

          });
        </script>
    </body>
</html>
tkhm
  • 860
  • 2
  • 10
  • 30