1 Replies - 413 Views - Last Post: 02 February 2018 - 11:31 AM

#1 O'Niel   User is offline

  • D.I.C Regular

Reputation: 15
  • View blog
  • Posts: 470
  • Joined: 13-September 15

Scroll down on click

Posted 02 February 2018 - 08:09 AM

Hi!

I have a button on my website which when clicked needs to make the page slowly scroll to the bottom.
This is some replicated code:
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    html, body {
            width: 100%;
            height: auto;
            min-height: 100%;
        }
         #scroll {
            background-color: #FF0000;
         }
        
        .bubble {
            width: 35px;
            height: 35px;
            background-color: #000000;
            border-radius: 100%;
            position: relative;
            left: 50%;
            transform: translate(-50%, 0);
            margin-top: 50px;
        }
       
       
    </style>
</head>
<body>
        <div id="wrapper">
            <div id="scroll" class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>

        <script>
            $("#scroll").click(function(event) {
                event.preventDefault();

                $('html', 'body').animate({ scrollTop: 5000 }, 50);
                console.log("X");
            });    
        </script>
</body>
</html>




Javascript code:
 $("#scroll").click(function(event) {
                event.preventDefault();

                $('html', 'body').animate({ scrollTop: 5000 }, 50);
                console.log("X");
            });    



When the red bubble is clicked, it should scroll down.
But it ain't working in any browser.

The function is executing, but the animation-part is wrong somehow.
What am I doing wrong?

Is This A Good Question/Topic? 0
  • +

Replies To: Scroll down on click

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2426
  • View blog
  • Posts: 7,421
  • Joined: 15-January 14

Re: Scroll down on click

Posted 02 February 2018 - 11:31 AM

Is the page even tall enough to have a scrollbar? It looks like you're telling both the html and body elements to scroll 5000 pixels down in 50 milliseconds. Maybe you should target a single element there, I'm not sure what happens when you tell it to scroll multiple elements at the same time.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1