CODEWITHSUNDEEP
jqueryhtmlscroll
NeviJ
NeviJ

Reputation: 81

How do I scrollTop to a div properly in jQuery?

I have:

<button class="contactButton">XYZ</button>

And when user will press this button I want my page to scroll down to specific div.

I tried this:

$(".contactButton").click(function () {
    $("html,body").animate({
    scrollTop: $(".specificDivClass").offset().top
    }, 1100);
});

Upvotes: 1

Views: 97

Answers (2)

VTodorov
VTodorov

Reputation: 973

The problem most likely is misspelling the class name and/or not including the JavaScript to the HTML. You can try using ID instead of class to select the element you want to scroll to.

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/psfLbo1n/

$(".contactButton").click(function () {
    $("html,body").animate({
    	scrollTop: $(".specificDivClass").offset().top
    }, 1100);
});
.div1{
  height: 700px;
  width: 100%;
  background: red;
}

.specificDivClass{
  height: 1000px;
  width: 100%;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="contactButton">XYZ</button>

<div class="div1">

</div>

<div class="specificDivClass">

</div>

Upvotes: 3

Related Questions