2012-03-16 83 views
0

我有這個按鈕,當我點擊它時,我想添加一個類到帶有ID的DIV。之後,它應該滾動到頁面的底部。jQuery - 向下滾動並添加疊加

我有這個目前:

$("#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; 
} 

目前我不能讓代碼做任何事情。沒有任何反應,當我按一下按鈕..

UPDATE:的jsfiddle:http://jsfiddle.net/P23P5/

在此先感謝。

+0

你可以在jsfiddle.net中顯示一個示例嗎? 或使用螢火蟲來明白到底是什麼錯誤.. – redDevil 2012-03-16 20:15:12

+0

我檢查了螢火蟲控制檯,它什麼也沒說。 – oliverbj 2012-03-16 20:16:31

+0

我加了一個jsFiddle。 – oliverbj 2012-03-16 20:21:11

回答

0

的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'); 
+0

css class .overlay應該有: display:block!important; – mcmorry 2012-03-16 20:39:55

0
$(document).ready(function(){ 

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

}) ; 

基本上,即可將點擊事件的頁面已經呈現

0

首先,您正在添加類.overlay而不是overlay

其次,在添加類之前,您沒有顯示id="overlay" div。

Thirly,你需要給覆蓋div一個固定或絕對的位置。