准确地说,我需要在点击按钮时将窗口滚动到div
的顶部。
我试过了:
$(".red").animate({"scrollTop": $(".red").scrollTop()},1000);
但没有工作
查看这个jsfiddle:https://jsfiddle.net/gu8gx1ad/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>