Question

我没有尝试找到在线作品。当我将鼠标悬停在链接上时，它会转到链接并且网址会更改，但它不会移动页面。我到目前为止使用的是Chrome。

以下是代码：

编辑：显然它与css有关，因为当我拿出css时它开始工作，但我不知道为什么

＆＃13;

$('.scroll').localScroll();

＆＃13;

body{
  margin:0;
  color: #222;
  background-color: #222;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  overflow-y: scroll;
overflow-x: hidden;
}

html, body {
	width: 100%;
	height: 100%;
}

.container{
  width: 80%;
  margin: 0 auto;
}

header::after{
  content: '';
  display: table;
  clear: both;
}

#down{
filter: brightness(0) invert(1);
width: 3%;
height: auto;
position: absolute;
top: 50; bottom:0; left: 0; right:0;
padding-bottom: 20px;
margin: auto;
}

.movetobot{
height: 200vh;
}

section h1{
  color: #fff;
  position: absolute;
  text-align: center;
  top: 110%;
  width: 100%;
  line-height: 0.4em;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.center{
  text-align: center;
}

header {
      width: 100%;
      height: 100vh;

      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

}

.logo {
  color: white;
  float: left;
  font-family: 'Roboto', sans-serif;
}

.btext{
  font-family: 'Roboto', sans-serif;
    color: #f9f3f4;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
    line-height: 0.4em;
}

h1{
    font-size: 50px;
}

.btn{
    color: #fff;
    font-family: 'Roboto' sans-serif;
    font-weight: 300;
    text-decoration: none;
    border: #ccc 1px solid;
    padding: 10px 15px;
    border-radius: 8px;
    line-height: 4em;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li{
  display: inline-block;
  margin-left: 85px;
  padding-top: 25px;

  position: relative;
}

nav a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #ecf0f1;
}

nav a::after{
  margin-top:5px;
  content: '';
  display: block;
  height: 5px;
  width: 0%;
  background-color: black;

  position: absolute;

  transition: all ease-in-out 350ms;
}

nav a:hover::after {
  width: 100%;
}

.btn:hover{
    color: #b19295;
    border: #fff 1px solid;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
  <link href="css/hover.css" rel="stylesheet" media="all">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="css/hover.css" rel="stylesheet" media="all">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="/icons8-home-24.png">
  <title>Royal Services</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="first">
    <div class="container">
      <a href="index.html"><h2 class="logo">R O Y A L</h2></a>
      <nav class="scroll">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#services">Offering</a></li>
          <li><a href="https://discord.gg/tmkjepT">Contact</a></li>
        </ul>
      </nav>
    </div>
    <!-- <hr width="100%"> -->
    <a href="#services">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/634848-200.png" alt="down" class="hvr-hang" id="down">
  </a>
    <div class="btext">
      <h1>ROYAL SERVICES</h1>
      <a href="https://discord.gg/tmkjepT" target="_blank" class="btn">Discord</a>
    </div>
  </div>
  <div id="services">
    <section class="movetobot">

      <h1>Services</h1>

    </section>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/2.0.0/jquery.localScroll.min.js></script>
<script src="js.js"></script>

</html>

＆＃13;

Answer 1

将 "id" 设置为您要移动的页面部件标记。

<a href="#someIdName"></a>
<div id="someIdName"></div>

Answer 2

这是因为您在if #available(iOS 13.4, *) { datePicker.preferredDatePickerStyle = .wheels }中的内容是浮动的还是绝对位置的，因此div没有很高的值，因此<div id="first">占据了整个页面。当您单击链接时，页面已经存在。

您可以做的是给<div id="services">指定最小高度。我要做的是以更好的方式构造HTML，并删除所有浮点数和绝对位置。

锚不会工作（去＃但不动）

2 个答案: