CODEWITHSUNDEEP
javascriptcssgoogle-chrome
carl
carl

Reputation: 4426

animate scrollTop doesn't work on Chrome?

I use an anchor element like this:

<div class="my_centered" id="index_scroll_down_button">
    <a href="#" onclick="smooth_scroll('#intro')">
        <img src="/static/img/scroll-down-icon.png">
    </a>
</div>

<div class="indexcontainer container" id="intro"> 
</div>

where the smooth_scroll function is defined as:

function smooth_scroll(target){
    $('html, body').animate({
        scrollTop: $(target).offset().top - 60
    }, 800);
}

This approach works fine on Safari, but does not seem to work on Chrome? Here is my css:

#index_scroll_down_button {
   position: absolute;
   bottom: 0px;
   left: 50%;
   margin-left: -30px;
}

Upvotes: 0

Views: 709

Answers (2)

Robert
Robert

Reputation: 201

Animate scrolltop worked for me in firefox but not in chrome and edge. The following css caused the problem:

html, body {
    overflow-x: hidden;
}

Upvotes: 3

skobaljic
skobaljic

Reputation: 9614

The script is running fine, but you have to prevent default anchor click event, in your case to use:

<a href="#" onclick="smooth_scroll('#intro'); return false;">

But, please try to remove embeded scripts and do something like this:

$('[data-scrollto]').on('click', function(e) {
    e.preventDefault();
    var target = $( $(this).data('scrollto') );
    $('html, body').animate({
        scrollTop: target.offset().top - 60
    }, 800);
});
#intro {
    border-bottom: 1px solid black;
}
#content {
    height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
    Intro
</div>
<div id="content">
    Content height 1000px.
</div>
<div class="my_centered" id="index_scroll_down_button">
    <a href="#" data-scrollto="#intro">
        Scroll top
    </a>
</div>

Also on JSFiddle.

Upvotes: 1

Related Questions