我在页面中添加了一个向下滚动的链接:
<div class="scroll">
<a onclick="scroll_down()" href="#" id="'scroll_id">
click me
</a>
</div>
<script>
function scroll_down() {
var y = $(window).scrollTop(); //current position
$("html, body").animate({scrollTop: y + $(window).height()}, 600);
}
function scroll_top() {
window.scrollTo(0, 0);
}
</script>
我要设置onclick
到达底部时的属性 scroll_top
.
向下滚动可以正常工作,但是当到达底部时, onclick
的属性的<a>
标签未更改。
<script>
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= $(document).height()) {
console.log('bootom')
$('#scroll_id').attr('onClick', '');
$('#scroll_id').attr('onClick', 'scroll_top()');
}
}
</script>
有人能告诉我错误在哪里吗?为什么它不起作用?
最佳答案
使用 on*
事件属性被认为是不好的做法 - 在运行时修改它们更糟糕。
更好的解决方案是使用一个不显眼的事件处理程序,它确定页面的当前滚动位置并根据需要向上/向下移动,如下所示:
$(function() {
$('#scroll_id').click(function(e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
$("html, body").animate({
scrollTop: scrollTarget
}, 600);
});
});
.scroll {
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
#content {
height: 1000px;
position: relative;
}
#content div {
position: absolute;
}
#content .top {
top: 20px;
}
#content .middle {
top: 500px;
}
#content .bottom {
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
<a href="#" id="scroll_id">click me</a>
</div>
<div id="content">
<div class="top">top</div>
<div class="middle">middle</div>
<div class="bottom">bottom</div>
</div>
关于javascript - 如何使用 jQuery 在页面上上下滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46647988/