ques-05vR4OdY

Search A2Z 24

Question : Smooth scroll to specific div on click

What I'm trying to do is make it so that if you click on a button, it scrolls down (smoothly) to a specific div on the page.

What I need is if you click on the button, it smooth scrolls to the div 'second'.

HTML:

<div class="first"><button type="button">Click Me!</button></div>
<div class="second">Hi</div>

CSS:

.first {
  width: 100%;
  height: 1000px;
  background: #ccc;
}
.second {
  width: 100%;
  height: 1000px;
  background: #999;
}
asked August 8, 2015

1 Answers

Dispalying 1 to 1 of 1 |

In jQuery many function or methods are there which we can use and get the required result

But using jQuery animate function to we can get our result that is :

$(".first button").click(function() {
    $("html,body").animate({scrollTop: $(".second").offset().top},"slow");
});

Here we are getting top offset of ".second" element by using $(".second").offset().top, after that we use jQuery animate method property "scrollTop",and passing second param in animate function that is Duration (slow).

See comments (0) | Comment
Answered 2 Years ago
Dispalying 1 to 1 of 1 |

Write your Answer write code <pre class="brush: xml">---code---</pre>

Login as a member to access answering block !! click-here
loading...

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×