gpt4 book ai didi

javascript - JQuery scrollTop() 函数不滚动

转载 作者:行者123 更新时间:2023-11-30 12:19:16 24 4
gpt4 key购买 nike

我试图在点击导航栏中的链接后滚动到某个元素。我查找了如何使用 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 div。我是 HTML/CSS/Javascript 的新手,我们将不胜感激。

fiddle http://jsfiddle.net/9g18ecgs/

最佳答案

问题是当您单击链接时页面会重新加载。尝试替换这个

.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/

关于javascript - JQuery scrollTop() 函数不滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31555593/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com