点击jquery滚动窗口?

时间:2017-06-16 09:37:04

标签: jquery

准确地说,我需要在点击按钮时将窗口滚动到div的顶部。

我试过了:

$(".red").animate({"scrollTop": $(".red").scrollTop()},1000);

但没有工作

查看这个jsfiddle:https://jsfiddle.net/gu8gx1ad/3/

3 个答案:

答案 0 :(得分:2)

你必须滚动html,body你的元素

$("html,body").animate({"scrollTop": $(".red").offset().top},1000);

代码段,

function sc(w) {
  var cls = '';
  switch (w) {
    case 0:
      cls = '.green';
      break;
    case 1:
      cls = '.blue';
      break;
    case 2:
      cls = '.red';
      break;
  }
  cls && $("html,body").animate({
    "scrollTop": $(cls).offset().top
  }, 1000);

}
.green,
.red,
.blue {
  height: 200px;
  width: 300px;
  background: green;
  margin-top: 100px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#green" style="color:green;" onclick="sc(0)">green</a>
<a href="#blue" style="color:blue;" onclick="sc(1)">blue</a>
<a href="#red" style="color:red;" onclick="sc(2)">red</a>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>

答案 1 :(得分:0)

以下代码应该为您解决问题。但只有在相应的部分的ID名称不是类名后才能起作用:

<a href="#green" style="color:green;" onclick="sc(0)">green</a>
<a href="#blue" style="color:blue;" onclick="sc(1)">blue</a>
<a href="#red" style="color:red;" onclick="sc(2)">red</a>
<div id="green" ></div>
<div id="blue" ></div>
<div id="red" ></div>



    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
        }
    });

答案 2 :(得分:-1)

我不确定您为什么要尝试使用JQuery来执行此操作。您需要做的就是给潜水提供一个id,并在您的链接中引用,如下所示。

<a href="www.domain.com/#red">GoToRed</a>

<div id="red">
    div content
</div>