0
JavaScriptを学んでいるので、そのプロセスに沿って1ページのウェブサイトを作成することにしました。私はページ内で円滑なスクロールを実装したいが、コードがきれいで正しいとはいえ、うまくいかない。私はこの問題を理解するのに助けが必要です。JavaScriptを使用したスムーズなスクロールの問題
基本的に何が起こっているのかは、ナビゲーションバーのリンクをクリックしてターゲットページを下ろすときです。まったくスクロールせず、何もしません。また、リンクをクリックした後にスクロールしようとすると、スクロールが揺れ、スクロールを続けません。
私はすでにデバッガでエラーをチェックしていますが、デバッガにはエラーはありません（少なくとも構文エラーはありません）。
問題をどのように見つけたら解決できますか？ここで
は、JavaScriptコードです：
var targetDistance = 0;
var distanceScrolled = 0;
var bodyHeight = 0;
var Ydistance = 0;
var marginY = 0;
var speed = 55;
var tempDist = 24;
function smoothScroll(el) {
targetDistance = document.getElementsByClassName(el).offsetTop; //Target distance to scroll from current element
distanceScrolled = window.pageYOffset; //Distance scrolled from current element to target element
bodyHeight = document.body.offsetHeight; //Maximum distance of the body to scroll from the current element
Ydistance = distanceScrolled + window.innerHeight; //Total distance scrolled from the current element to the bottom
var setScroll = setTimeout(function(){
smoothScroll(el);
}, 1);
//Stop Scrolling when it hits bottom of the page
if (Ydistance >=bodyHeight) {
clearTimeout(setScroll);
}
//Scroll if the distance scrolled is less than the target distance
else if(distanceScrolled < targetDistance - 24) {
var distToScroll = distanceScrolled + 24;
window.scroll(0, distToScroll);
}
//stop when the distance scrolled equals or is greater than the target distance
else {
window.scroll(0, distToScroll);
}
}
君たちは、HTML5のコードが必要な場合は、ここにある：場合
<!doctype html>
<html lang="en">
<head>
<title>Smooth Scrolling</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="allPages" class="Page1">
<div class="navBar">
<nav>
<ul>
<li><a href="#" onclick="smoothScroll('Page4'); return false;">Contacts</a></li>
<li><a href="#" onclick="smoothScroll('Page3'); return false;">Portfolio</a></li>
<li><a href="#" onclick="smoothScroll('Page2'); return false;">About Me</a></li>
<li><a href="#" onclick="smoothScroll('Page1'); return false;">Home</a></li>
</ul>
</nav>
</div>
</div>
<div id="allPages" class="Page2">
</div>
<div id="allPages" class="Page3">
</div>
<div id="allPages" class="Page4">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
あなたもここで、CSSのコードが必要ですそれは：
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: monospace;
font-size: 18px;
}
.body {
height: 100%;
}
.navBar {
margin-top: 2%;
}
.Page1 {
height: 100vh;
}
.Page1 ul {
list-style: none;
margin-right: 10%;
margin-left: 65%;
}
.Page1 ul a {
float: right;
text-decoration: none;
padding: 15px;
color: black;
font-weight: bold;
}
.Page1 ul a:hover {
background-color: #D91E18;
color: white;
}
.Page2 {
height: 100vh;
background-color: #DADFE1;
}
.Page3 {
height: 100vh;
background-color: #DADFE1;
}
.Page4 {
height: 100vh;
background-color: #DADFE1;
}
ちょっと男、私はgetElementByClassname問題を修正しましたが、問題のほんの一部しか解決しませんでした。ボタンをクリックして下にスクロールすると、無限に上下にスクロールします。だから、私はgetElementByClassNameが唯一の問題ではないと思います。どうぞ、質問を再開して問題を解決できるようにしてください。先にありがとう – einacio
他の問題を解消しました。 – einacio