Question

我有这个按钮，当我点击它时，我想要一个带有ID的DIV类。之后，它应滚动到页面底部。

我目前有这个：

  $("#signUp").click(function() {
$("#overlay").addClass(".overlay");       
 $('html, body').animate({scrollBottom:0}); 

    });

HTML：

<div class="big-signup"> <a href="javascript: void(0)" id="signUp"><button>Sign up now. It's <span>FREE &raquo;</span></button></a><br /> <br />

和css：

#overlay{
    height:100%;
    width:100%;
    display:none;
}
.overlay{
    background-color:#000;
    opacity:0.5;
}

目前我无法让代码做任何事情。单击按钮时没有任何反应..

更新：jsFiddle：http://jsfiddle.net/P23P5/

提前致谢。

Answer 1

$(document).ready( function(){

$("#signUp").click(function() {
$("#overlay").addClass(".overlay");       
 $('html, body').animate({scrollBottom:0});     
    });

}) ;

基本上，在页面呈现后应用click事件

Answer 2

addClass方法期望没有任何点的类的名称：

$("#overlay").addClass("overlay");

通常用于将页面滚动到特定位置的代码是：

var target = $(window).height(); // Y value
var animationSelector='html:not(:animated)';

// Fix for Safari
if($.browser.safari) {animationSelector='body:not(:animated)';}
// Animate
$(animationSelector).animate({scrollTop: target}, 400, 'swing');

Answer 3

首先，您要添加课程.overlay而不是overlay。

其次，在添加课程之前，您没有显示id="overlay" div。

Thirly，您需要将叠加div设置为固定位置或绝对位置。

jQuery - 向下滚动并添加叠加层

3 个答案: