Read Less Button scroll page

Question

I have a Read More/Read Less button for product descriptions on my website.

My problem is, at the bottom of the extended description, when clicking the Read Less button, it shortens the description as expected but the page doesn't scroll back up to the top of the description div so I'm left looking at the page footer.

Is there a way to make it scroll back up to the top of the div?

I did, yeah, but to no avail. Perhaps it's JS is interfering somehow? The website is [here](http://radshaperc.businesscatalyst.com/scale-and-off-road/scale-rock-crawling-kits/1-10-gs01-komodo-truck-scale-crawler-kit#product-description) — ConduciveMammal, Dec 03 '15 at 09:53
Did you try [this post](http://stackoverflow.com/questions/18071046/smooth-scroll-to-specific-div-on-click) or [this post](http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript) — Dan Chaltiel, Dec 03 '15 at 09:59

score 1 · Accepted Answer · answered Dec 03 '15 at 11:36

For future readers, this Fiddle has a script that works perfectly.

The HTML

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

The JavaScript

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

The CSS

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

Read Less Button scroll page

1 Answers1