2015-10-09 22 views
0

代碼示例:jQuery的:點擊()滾動具體的股利和隱藏頂格

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 

<div id="intro"> 
    <a href="#" id="showfullsite"></a> 
</div> 

<div id="fullsite"></div> 

</body> 
</html> 

的jQuery:

$("#showfullsite").click(function() { 

    $('html, body').animate({ 
     scrollTop: $("#fullsite").offset().top 
    }, 2000); 

    $('html, body').css('overflow', 'auto'); 
    $('#intro').hide(2000); 

}); 

簡單的CSS:

body { 
overflow: hidden; 
} 

大家好,我不是jQuery專家。我是初學者。所以,我有一個問題。我有兩個div封套,一個用於介紹,另一個用於完整網站。我正在製作一個這樣的網站,當我在瀏覽器中打開我的網站時,只有頂部的#intro div可見,整個網站將隱藏。我正在使用overflow: hidden;來隱藏電腦屏幕的其他部分。我有一個控制在#intro div屏幕解鎖整個網站。所以,當我點擊控件時,網站將滾動到#full-site。我正在使用查詢來做這件事,我正在添加$('html, body').css('overflow', 'auto');來顯示網站的隱藏部分。另外,我加入$('#intro').hide(2000);來隱藏頂部#intro

此時頂部#intro被隱藏和滾動效應正在發揮作用。但#intro格內容去左邊,右邊時#intro被隱藏和滾動效果是不會有針對性的ID。它從目標股中下跌。我怎樣才能正確完成工作?

+0

對於一個fullsite不是ID。它是一個班級。因此,將磅改爲點或將類屬性更改爲一個ID。介紹也一樣。 – AtheistP3ace

+0

你的div是'class =「intro」',而不是'id'。 – k97513

+1

其溢出:隱藏;不過度:隱藏; – imGaurav

回答

1

你在你的HTML寫在你的JavaScript #fullsite,但<div class="fullsite"></div>。 您需要將您的HTML更改爲<div id="fullsite"></div>

intro同樣的錯誤。

記住:一種接入ID你應該#前綴,類你應該使用.

你可以閱讀更多關於這裏的選擇:http://api.jquery.com/category/selectors/basic-css-selectors/

在你的情況下,我更喜歡基於「ID」,而不是「類」的解決方案。事實上,任何有效的HTML文檔都可以包含許多使用相同類的元素,但不應該使用相同的ID存在更多的元素。 這意味着$(「。aaa」)將返回一個包含任何元素的列表,其中包含aaa類,但$(「#aaa」)將返回唯一具有aaa id的元素。

0

這是你要如何運行的代碼

$("#showfullsite").click(function() { 
 

 
    $('html, body').animate({ 
 
    scrollTop: $(".fullsite").offset().top 
 
    }, 2000); 
 

 
    $('html, body').css('overflow', 'auto'); 
 
    $('.intro').hide(2000); 
 

 
});
.container { 
 
    overflow: hidden; 
 
    height: 18px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="intro"> 
 
     <a href="#" id="showfullsite">go to fullsite</a> 
 
    </div> 
 

 
    <div class="fullsite">this is fullsite</div> 
 
    </div> 
 
</div>