jQuery中的ScrollTop问题（主要在Chrome中）

Question

So I've been having issues using scrollTop for a website. I've made some test code and I've managed to get it working in Firefox, but it still refuses to work in Chrome... I really can't see what is wrong with the code. I have added a console.log() to show the value of the offset and this works fine, but the Chrome browser doesn't scroll to the div with id="search". Can anyone see anything that I'm doing wrong?

<a href="#" id="test-btn" class="darhoudou-button">Test</a>

<div class="test-box">test1</div>
<div class="test-box">test2</div>
<div class="test-box">test3</div>
<div class="test-box">test4</div>
<div class="test-box" id="search">test5</div>
<div class="test-box">test6</div>

<script>
     $(document).ready(function(){

        $('#test-btn').on('click', function(){

            $('html, body').animate({
                scrollTop: $('#search').offset().top
            }, 200);

        });

        console.log($('#search').offset().top);         
    });
</script>

Answer 1

I tested your code and it has no problem.

If your browser has height 500px and page 600px, You can only 100px scroll. And if height of page is less than 500px then there is no Scroll.

Please change this <div class="test-box">test6</div> to this:

<div class="test-box" style="height:1000px;">test6</div>

And see the result, Or you can test this snippet with chrome:

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <a href="#" id="test-btn" class="darhoudou-button">Test</a> <div class="test-box">test1</div> <div class="test-box">test2</div> <div class="test-box">test3</div> <div class="test-box">test4</div> <div class="test-box" id="search">test5</div> <div class="test-box" style="height:1000px;">test6</div> <script> $(document).ready(function(){ $('#test-btn').on('click', function(){ $('html, body').animate({ scrollTop: $('#search').offset().top }, 200); }); console.log($('#search').offset().top); }); </script> 

Answer 2

SOLVED

Turns out that it was my css file causing the issue... If anyone else experiences a similar issue, I would recommend commenting out any js and css files one by one and see if fixes it. That might help you pinpoint which file is causing the issue...

The problem with my css was the following:

 html { 
    overflow: hidden;
    height: 100%;
}    


body {
    overflow: auto;
    height: 100%;
}