Question

我正在学习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;
}

Answer 1

您需要稍微修改一下代码：

targetDistance = document.getElementsByClassName(el).offsetTop;

变为：

targetDistance = document.getElementsByClassName(el)[0].offsetTop;

getElementsByClassName返回一个数组。

使用JavaScript平滑滚动问题

1 个答案: