0

我想要折叠上方的按钮，上面写着“向下滚动！” 点击时。我希望它使整个浏览器的高度向下动画。因为人们有不同的屏幕分辨率。我想使用一个变量。然而这是完全不可能的。

下面的代码有效，但仅设置高度为 800 像素。

相反，我需要它与var hheight.

我整晚都在搜索stackoverflow，只有很少的线索可循，也没有真正的解决方案。

这是有效的：

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = jQuery(window).width();
    var hheight = jQuery(window).height();

    jQuery('#jqWidth').html(width);
    jQuery('#jqHeight').html(hheight);
};
jQuery(document).ready(jqUpdateSize);    // When the page first loads
jQuery(window).resize(jqUpdateSize);     // When the browser changes size

jQuery(document).ready(function() {
    jQuery(".my-btn").click(function(event){
    jQuery('html, body').animate({scrollTop:'+=' + 800 + 'px'}, '800');
    });
});

以下不起作用：

jQuery('html, body').animate({scrollTop:'+=' + hheight+ 'px'}, '800');

希望有人知道如何处理这个问题。

4

2 回答 2

0

你需要一个匿名函数ready()和resize()

所以，

jQuery(document).ready(function(){jqUpdateSize();});
jQuery(window).resize(function(){jqUpdateSize();});

否则，您的jqUpdateSize函数永远不会被调用，并且您的变量hheight中没有任何内容

最佳做法是将所有这些都放在document.ready()

像这样：

jQuery(document).ready(function() {
    jqUpdateSize();
    jQuery(window).resize(function(){jqUpdateSize();});
    jQuery(".my-btn").click(function(event){
        jQuery('html, body').animate({scrollTop:'+=' + hheight + 'px'}, '800');
    });
});
于 2013-04-03T20:09:01.030 回答
0 
var hheight = jQuery(window).height();
jQuery('html, body').animate({scrollTop:'+=' + hheight+ 'px'}, '800');

这项工作很好---演示

尝试将其 jQuery(window).resize(jqUpdateSize);移入ready

它应该看起来像这样

jQuery(document).ready(function() {
    jQuery(window).resize(jqUpdateSize);
    jQuery(".my-btn").click(function(event){
    jQuery('html, body').animate({scrollTop:'+=' + 800 + 'px'}, '800');
    });
});
于 2013-04-03T20:12:45.087 回答