我想在不使用jQuery的情况下平滑地滚动到一个元素--只使用纯javascript。我希望一个通用的功能,能够顺利地向下滚动和向上滚动到文档中的特定位置。
我知道我可以在jQuery中使用以下内容:
$('html, body').animate({
scrollTop: $('#myelementid').offset().top
}, 500);
如果只用javascript我该怎么做呢?
这就是我想要做的:
function scrollToHalf(){
//what do I do?
}
function scrollToSection(){
//What should I do here?
}
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
This is a section
</section>
在jquery中,我会这样做:
html, body{
height: 3000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onClick="scrollToHalf()" value="Scroll To 50% of Page">
<br>
<input type="button" onClick="scrollToSection()" value="Scroll To Section1">
<section style="margin-top: 1000px;" id="section1">
This is a section
</section>
<script>
function scrollToHalf(){
var height = $('body').height();
$('html, body').animate({
scrollTop: height/2
}, 500);
}
function scrollToSection(){
$('html, body').animate({
scrollTop: $('#section1').offset().top
}, 500);
}
</script>
编辑:我也希望能够平滑滚动到页面上的某个位置
编辑: CSS解决方案也是受欢迎的(尽管我更喜欢javascript解决方案)
https://stackoverflow.com/questions/51689653
复制相似问题