Question

当html和正文样式如下所示，scrollTop（）不起作用的主要问题是：

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或body元素（或任何地方）删除overflow属性时，所有工作都很完美，但是当我滚动文档BG图像结束时，我得到了空白区域。当我点击.get_method按钮时，我需要的只是修复BG图像和工作scrollTop动画效果。

编辑：

element .test它是一个div元素。 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;
    });

});

当html和body溢出auto时，jquery scrollTop不起作用

1 个答案: