gpt4 book ai didi

javascript - 窗口高度不适用于浏览器调整大小

转载 作者:行者123 更新时间:2023-12-03 02:27:46 26 4
gpt4 key购买 nike

我有这段代码,当页面有滚动条时,或者换句话说,当浏览器高度超过用户桌面分辨率时,显示“滚动到底部”链接。无论如何,如果页面最初加载时浏览器窗口高度较大,但如果我在页面加载后调整窗口大小,则它不会触发,那么它就可以正常工作。

如有任何帮助,我们将不胜感激。

$(function() {
// Check to see if window has scrollbars
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
// Click event to scroll to bottom
$('.scrollToBottom').click(function() {
$('html, body').animate({
scrollTop : $(document).height()-$(window).height()
}, 1500, 'easeOutQuint');
return false;
});
});

最佳答案

这是因为没有“触发器”。

请参阅此语句 $(function() { .//code }) 当文档准备就绪时,执行代码。

您需要的是浏览器调整大小时的另一个触发器:

$(window).resize(function (){
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
})

由于您不想重复自己,因此您应该编写一个函数并在这些“触发器”内调用它。

function showBar() {
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
}

$(window).resize(function (){
showBar();
})

$(function() {
showBar();
})

这些触发器称为事件。以供引用: https://developer.mozilla.org/en-US/docs/Web/Events

关于javascript - 窗口高度不适用于浏览器调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48869938/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com