我对代码很陌生。我正在创建一个个人网站，我想要一个菜单，当您单击某个主题时，该菜单会自动滚动到网站上的该部分。我来自平面设计师界。
当您单击联系人时，它会执行应有的操作。但是，当您单击“浏览”时，它的位置不在顶部，而是在下方。我希望它到达顶部，但由于某种原因它不起作用。我的大部分JS都是来自Stackoverflow btw。
BTW图像看起来有点怪异，这是由于片段的窗口分辨率所致。也需要找到一种解决方法。
我想要的是： 在单击左上角的菜单然后浏览时，页面必须平滑滚动到顶部。
只需在代码段中进行尝试，您就会了解我的问题。
（我正在使用Safari浏览器，macOS）
function myFunction() {
if($("#myDropdown").is(":visible")){
$("#myDropdown").fadeOut();
} else {
$("#myDropdown").fadeIn();
}
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
$("#myDropdown").fadeOut();
}
}
}
$(function()
{
$("#btnButton1").click(myFunction);
});
$("a[href='#bottom']").click(function() {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
return false;
});
$("a[href='#']").click(function() {
$("html, body").animate({ scrollTop: $(functionid).height() }, "fast");
return false;
});#btnButton1:hover + #img {
opacity: 0.7;
transition: opacity .3s;
}
#drpbtn:hover {
opacity: 0.7;
transition: opacity .3s;
}
.Menu {
cursor: pointer;
position: fixed;
top: 17px;
left: 17px;
opacity: 1;
z-index:5;
color: white;
transition: opacity .3s;
}
button:focus {outline:0;}
.dropbtn {
border: none;
cursor: pointer;
position: fixed;
top: 17px;
left: 17px;
opacity: 1;
background-color: transparent;
z-index: 6;
color: white;
width: 24px;
height: 24px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
z-index: 3;
display: none;
position: fixed;
background-color: #141414;
min-width: 160px;
overflow: auto;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
top: 60px;
width: 100%;
left: 0px;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
background-color: rgba(0, 0, 0, 0.6);
}
.dropdown-content a {
color: white;
padding: 13px 18px;
text-decoration: none;
display: block;
font-family: Helvetica;
font-weight: 200;
opacity: 1;
transition: color .3s;
letter-spacing: 2px;
}
.dropdown a:hover {
color: #a3a3a3;
transition: color .3s;
}
.show {
display:block;
}
.Logo {
position: fixed;
z-index: 6;
left: 50%;
top: 14px;
opacity: 1;
transform: translate(-50%, 0);
transition: opacity .3s;
}
.Logo:hover, .Logo:focus {
opacity: 0.7;
transition: opacity .3s;
}
.Menu:hover {
opacity: 0.7;
transition: opacity .3s;
}
.back {
left: 0%;
top: 0px;
position: fixed;
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
}
.fixedbar {
position: fixed;
top: 0;
left: 0;
z-index: 4;
width: 100%;
height: 60px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: rgba(0, 0, 0, 0.7);
}
.contact {
margin-top: 36px;
position: absolute;
z-index: 3;
top: 100%;
left: 50%;
font-family: Helvetica;
color: black;
font-size: 16px;
transform: translate(-50%, 0);
font-weight: 200;
}
.info {
position: absolute;
z-index: 6;
top: 100%;
margin-top: 78px;
left: 50%;
font-family: Helvetica;
color: black;
font-size: 14px;
transform: translate(-50%, 0);
text-decoration: none;
font-weight: 200;
}
.info a:link {
color: black;
text-decoration: none;
}
.info a:visited {
color: black;
text-decoration: none;
}
.info a:hover {
color: black;
text-decoration: underline;
}
.info a:active {
color: black;
text-decoration: none;
}
.insta {
position: absolute;
z-index: 6;
top: 100%;
margin-top: 118px;
left: 50%;
transform: translate(-50%, 0);
transition: filter .3s;
opacity: 1
}
.insta:hover, .insta:focus {
opacity: 0.7;
transition: opacity .3s;
}
.contactb {
background-color: #f2f2f2;
top: 100%;
width: 100%;
left: 0;
height: 162px;
position: absolute;
z-index: 2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title color="white">
dnsvnr
</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=jwL2yROogB">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=jwL2yROogB">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=jwL2yROogB">
<link rel="manifest" href="/site.webmanifest?v=jwL2yROogB">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=jwL2yROogB" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=jwL2yROogB">
<meta name="msapplication-TileColor" content="#5bbad5">
<meta name="theme-color" content="#5bbad5">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="dropdown">
<button id="btnButton1" class="dropbtn" >
</button>
<img id="img"src="http://www.dnsvnr.com/Menu.png" width="24" height="24" class="Menu" />
<div id="myDropdown" class="dropdown-content">
<a href="/">Home</a>
<a id="functionid" href="#">Explore</a>
<a id="document" href="#bottom">Contact</a>
</div>
</div>
<body>
<a href="/"><img src="http://www.dnsvnr.com/logo.png" class="Logo" width="32" height="32"/></a>
</body>
<back class="background"></back>
<nav class="fixedbar"></nav>
<center id="contact" class="contact"> Contact </center>
<center class="info">
<a href="mailto:info@dnsvnr.com">email: info@dnsvnr.com</a>
</center>
<a href="http://www.instagram.com/dnsvnr" target="_blank"><img src="http://www.dnsvnr.com/insta.png" class="insta" width="16" height="16"/></a>
<nav class="contactb"></nav>
<img class="back" src="http://s3-eu-west-1.amazonaws.com/fthtsi-assets-production/ez/images/8/3/6/5/125638-1-eng-GB/main_6e766fc6-3097-4df1-93a9-4228f60f2f27.jpg">
答案 0 :(得分：0)
据我所见，单击功能之一内的functionid未定义，因此它给您带来意想不到的行为。那是要成为ID选择器吗？
$("a[href='#']").click(function() {
$("html, body").animate({ scrollTop: $("#functionid").height() }, "fast");
return false;
});
此外，如果要将滚动条发送到文档顶部，可以将scrollTop设置为0。