JQuery的scrollTop（）函數不滾動

我試圖在點擊導航欄中的鏈接後滾動到一個元素。我擡頭一看如何使用jQuery的scrollTop的（）函數，並使用資源從堆棧溢出要做到這一點，我想出了這個：JQuery的scrollTop（）函數不滾動

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Sib Quayum</title> 
    <link rel="stylesheet" type="text/css" href="main.css"/> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="script.js"></script> 
<div class="nav"> 
    <ul> 
     <li><a href="" class="clickContact">Contact </a></li> 
     <li><a href="" class="clickAbout">About Me </a></li> 
     <li><a href="" class="clickHome">Home </a></li> 
    </ul> 

</div> 
<div class="headerBreak"></div> 

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

<div id="About">Hi this is about me.</div> 


<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> 

<div id="Contact">Contact me and stuff</div> 

</body> 
</html>

的JavaScript：

$(".clickContact").click(function() { 
    $('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000); 
});

CSS ：

*{ 
    font-family:Tahoma; 
} 

.nav{ 


    height:40px; 
    background:maroon; 
    margin-top: 20px; 
} 

.nav ul{ 
    margin:0; 
    padding:0; 
} 

.nav ul li{ 
    list-style:none; 
} 

.nav ul li a{ 
    text-decoration:none; 
    float:right; 
    display:block; 
    padding:10px 20px; 
    color:orange; 
} 

.nav ul li a:hover{ 
    color:white; 
}

每當我點擊導航菜單上的「聯繫人」，它都不會滾動#Contact di訴我是HTML/CSS/Javascript的新手，任何幫助將不勝感激。

小提琴http://jsfiddle.net/9g18ecgs/

來源

2015-07-22 sqsib

你可以創建一個小提琴嗎？ –

相反的jQuery，你只是單純的需要使用：

<li><a href="#contact" class="clickContact">Contact </a></li>

後藤接觸DIV位置。看看代碼片段

*{ 
 
    font-family:Tahoma; 
 
} 
 

 
.nav{ 
 

 

 
    height:40px; 
 
    background:maroon; 
 
    margin-top: 20px; 
 
} 
 

 
.nav ul{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.nav ul li{ 
 
    list-style:none; 
 
} 
 

 
.nav ul li a{ 
 
    text-decoration:none; 
 
    float:right; 
 
    display:block; 
 
    padding:10px 20px; 
 
    color:orange; 
 
} 
 

 
.nav ul li a:hover{ 
 
    color:white; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Sib Quayum</title> 
 
    <link rel="stylesheet" type="text/css" href="main.css"/> 
 
</head> 
 
<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="script.js"></script> 
 
<div class="nav"> 
 
    <ul> 
 
     <li><a href="#contact" class="clickContact">Contact </a></li> 
 
     <li><a href="" class="clickAbout">About Me </a></li> 
 
     <li><a href="" class="clickHome">Home </a></li> 
 
    </ul> 
 

 
</div> 
 
<div class="headerBreak"></div> 
 

 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 

 
<div id="About">Hi this is about me.</div> 
 

 

 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
 
<br> 
 

 
<div id="Contact">Contact me and stuff</div> 
 

 
</body> 
 
</html>

來源

2015-07-22 06:40:40

我試圖讓它成爲動畫，所以這就是爲什麼我想使用JQuery。 – sqsib

您的代碼應正常工作，如果你只需要添加return false到您的事件處理程序：

$(".clickContact").click(function() { 
    $('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000); 
    return false; 
});

的jsfiddle：http://jsfiddle.net/n9n43on7/

來源

2015-07-22 06:45:53

與Idov Mamane的解決方案一樣，您的解決方案也是如此。 JSFiddle可以工作，但是當我將它放入我的HTML/CSS/JS文件並在Chrome中運行時，沒有任何變化。 – sqsib

@sqsib我注意到你的腳本包含在腳本標記中 - 你確定腳本正在被加載嗎？確保腳本位置正確，文件名正確。同時檢查你的JavaScript控制檯，看看你是否有任何錯誤。 –

您需要提供href屬性爲你點擊的錨，因爲它不存在頁面正在滾動到頁。

<a href="#Contact" class="clickContact">Contact </a>

請參閱更新小提琴http://jsfiddle.net/9g18ecgs/1/

來源

2015-07-22 06:46:06

錨標籤不需要'href'屬性：http://www.w3.org/TR/html5/links.html#attr-hyperlink-href –

是的，你是對的，但在這種情況下它是需要的。順便說一句，你的解決方案也是很好的出路 –

當我添加屬性，它沒有滾動，它只是跳到它。 – sqsib

的問題是，當你點擊鏈接的頁面重新加載。試圖取代這

.nav ul li a{ 
    text-decoration:none; 
    float:right; 
    display:block; 
    padding:10px 20px; 
    color:orange; 
} 

By this : 

.nav ul li{ 
    text-decoration:none; 
    float:right; 
    display:block; 
    padding:10px 20px; 
    color:orange; 
    cursor: pointer; 
} 


And this : 


<li><a href="" class="clickContact">Contact </a></li> 
<li><a href="" class="clickAbout">About Me </a></li> 
<li><a href="" class="clickHome">Home </a></li> 


By this : 


<li class="clickContact">Contact</li> 
<li class="clickAbout">About Me</li> 
<li class="clickHome">Home</li>

這將工作！ http://jsfiddle.net/9g18ecgs/4/

來源

2015-07-22 07:09:26

JSfiddle似乎工作正常，但是當我將它放入我的代碼中，並且在瀏覽器（Chrome）中將他的網站廢棄時，它不起作用。我點擊聯繫人，沒有任何反應。我試着直接複製粘貼你的JSFiddle代碼，它也沒有工作。 – sqsib

你也可以試試這個http://jsfiddle.net/YYPKM/1392/ –

JQuery的scrollTop（）函數不滾動

回答

相關問題