页面向上跳转而不是向上滚动
Page jumps up instead of scrolling up
本文关键字:滚动 更新时间:2023-09-26
我从另一个堆栈溢出问题中得到了这个代码位,但似乎有一个小问题。当我从一个部分移动到另一个部分时,散列会正确地改变,但当我试图向上滚动时,它会跳到最顶部,而不是平滑的手动滚动。如有任何帮助,我们将不胜感激:)
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<header>
</header>
<body>
<div class="main">
<section id="one" class="section"></section>
<section id="two" class="section"></section>
<section id="three" class="section"></section>
<section id="four" class="section"></section>
<section id="five" class="section"></section>
<section id="six" class="section"></section>
</div>
</body>
</html>
这是JS:
$(document).scroll(function(){
$('section').each(function(){
if (
$(this).offset().top < window.pageYOffset
//begins before top
&& $(this).offset().top + $(this).height() > window.pageYOffset
//but ends in visible area
//+ 10 allows you to change hash before it hits the top border
) {
window.location.hash = $(this).attr('id');
}
});
});
您可以执行pageYOffset
,而不是$(window).scrollTop()
,它将返回页面顶部与窗口中文档顶部的偏移距离。如果你想动画滚动到属性,你会想滚动到带有id的元素的位置。如果你想动态滚动到页面顶部,你可以做
$(window).animate({
top: 0
}, 1000);
您可以通过在javascript中添加向上滚动动画来克服这个问题,通过这种方式,我们为滚动添加了延迟,从而提供完美的向上滚动效果。
Javascript
window.onload = function() {
// short timeout
setTimeout(function() {
$(document.body).scrollTop(0);
}, 15);
};
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS)上的jQuery平滑滚动问题
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- JavaScript上下滚动不可预测
- 滚动和表格
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 循环滚动数组
- 滚动以修复向上滚动的问题
- css停止图像在滚动中移动