使用JavaScript平滑滚动问题

问题描述：

我正在学习JavaScript，因此我决定在整个过程中创建一个页面网站。我想在页面中实现平滑滚动，但即使代码显得干净而正确，它也不起作用。我需要帮助解决这个问题。使用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

答

你需要修改你的代码一点点：

targetDistance = document.getElementsByClassName(el).offsetTop;

变为：

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

getElementsByClassName方法返回一个数组。

好吧，我做到了，但现在它滚动了一下，但滚动无限地上下滚动。对此也有帮助吗？谢谢 – einacio

没关系，我解决了另一个问题。谢谢 – einacio

使用JavaScript平滑滚动问题

相关推荐