scroll window on click jquery?

Question

To Be precise I need to scroll the window to the top of a div on click of a button.

I tried this:

$(".red").animate({"scrollTop": $(".red").scrollTop()},1000);

But didn't worked

Check out this jsfiddle: https://jsfiddle.net/gu8gx1ad/3/

Answer 1

You have to scroll html,body wrt your element like

$("html,body").animate({"scrollTop": $(".red").offset().top},1000);

Snippet,

function sc(w) {
  var cls = '';
  switch (w) {
    case 0:
      cls = '.green';
      break;
    case 1:
      cls = '.blue';
      break;
    case 2:
      cls = '.red';
      break;
  }
  cls && $("html,body").animate({
    "scrollTop": $(cls).offset().top
  }, 1000);

}

.green,
.red,
.blue {
  height: 200px;
  width: 300px;
  background: green;
  margin-top: 100px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#green" style="color:green;" onclick="sc(0)">green</a>
<a href="#blue" style="color:blue;" onclick="sc(1)">blue</a>
<a href="#red" style="color:red;" onclick="sc(2)">red</a>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>

Answer 2

The following code should do the trick for you. But it only works after the corresponding sections have their ID names not class names :

<a href="#green" style="color:green;" onclick="sc(0)">green</a>
<a href="#blue" style="color:blue;" onclick="sc(1)">blue</a>
<a href="#red" style="color:red;" onclick="sc(2)">red</a>
<div id="green" ></div>
<div id="blue" ></div>
<div id="red" ></div>



    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
        }
    });

Answer 3

I'm not sure why you are trying to use JQuery to do this. All you need to do is give the dive an id and reference that in your link as per below.

<a href="www.domain.com/#red">GoToRed</a>

<div id="red">
    div content
</div>