JQuery scrollTop не работает, когда HTML и переполнения тела авто

Question

Основная проблема, которая scrollTop() не работает, когда HTML и стили тела выглядит следующим образом:

html 
    margin: 0 
    padding: 0 
    border: 0 
    overflow: auto 

body 
    padding: 0 
    margin: 0 
    background-image: url('/imgs/bg1.jpg') 
    overflow: auto 
    background-repeat: no-repeat 

Мой JS код:

$('.get_method').click(function() { 

    $('body').animate({ 
    scrollTop: $(".test").offset().top 
    }); 

}); 

Когда я удаляю свойство переполнения из html или элементов тела (или везде), все работает отлично, но когда я прокручиваю документ BG, изображение заканчивается, и я получаю пустое пространство. Все, что мне нужно, - это фиксированное изображение BG и рабочий эффект scrollTop, когда я нажимаю кнопку .get_method.

EDIT:

элемент .test его в сНу элемента. CSS:

.test 
    position: relative 
    top: 900px 

Answer 1

попробовать этот

demo

HTML

<h1>Top of the page</h1> 

<article style="height: 1000px"> 
    <p style="margin-bottom: 600px">Scroll down the page&hellip;</p> 
    <p>Then click the box.</p> 
    <a href="#" class="scrollup">Scroll</a> 
</article> 

JQuery

$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
     } else { 
      $('.scrollup').fadeOut(); 
     } 
    }); 

    $('.scrollup').click(function() { 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 600); 
     return false; 
    }); 

});