Question

点击导航栏中的链接后，我正在尝试滚动到某个元素。我查看了如何使用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的新手，任何帮助将不胜感激。

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

Answer 1

如果您只是将return false添加到事件处理程序中，那么您的代码应该可以正常工作：

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

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

Answer 2

你需要为你点击的锚提供href属性，因为它不是页面滚动回顶部。

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

请参阅更新的小提琴http://jsfiddle.net/9g18ecgs/1/

Answer 3

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

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

Answer 4

而不是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>

JQuery scrollTop（）函数不滚动

4 个答案: