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（）函数不滚动

回答

相关问题