我设置了一个简单的单页网站,当您单击每个菜单项时,页面会平滑滚动到该特定部分。这部分我工作得很好......
加载该部分后,将显示图像,文本会在图像上缓慢向上滚动,这在第一部分(最高部分)上工作得非常好。
当您单击第二个、第三个和第四个菜单链接时,我遇到的问题是,一旦页面移动到页面的该部分,内容就会继续向上滚动,因为上面的部分也会加载滚动。
这是我用来加载文本以向上滚动的 JavaScript:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.content-scroll').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 800;
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'margin-top':'0'},10000);
}
});
});
});
CSS:
.content-scroll { margin-top: 1000px; }
任何人都可以推荐执行此操作的最佳方法,以便当我单击第二、第三和第四部分链接时,它会跳转到该部分,并且上面的内容会立即加载,而无需向上滚动内容?
感谢任何反馈。谢谢
编辑:事先我为每个链接输入上面的代码(.about-section
、services-section
等),但意识到我只需要输入一次。
不过,一旦加载该部分,其中的内容就会向上滚动。
任何反馈表示赞赏:)
编辑2:我整理了一个测试网站,显示滚动问题http://test.flixonstudios.co.uk - 在这里你可以清楚地看到我的意思。
最佳答案
我有这个代码笔,我不久前做了
https://codepen.io/simondavies/pen/WRXOZw
$('#navigation').on('click', function(evt){
evt.preventDefault();
var gotoSection = evt.target.dataset.scrollto;
var scrollPos = document.querySelector('#'+ gotoSection).offsetTop;
$('html,body').animate({scrollTop: scrollPos },1000,'linear');
});
$('p').on('click','a.back',function(evt){
evt.preventDefault();
$('html,body').animate({scrollTop: 0 },1000,'linear');
})
.sections {
margin: 0 auto;
padding:30px;
height: 100Vh;
background: #d9d9d9;
display: table;
verticle-align: middle;
}
.two {
background: #e9e9e9;
}
p {
margin: 0 auto;
text-align: center;
font-family: helvetica;
font-size: 20px;
line-height: 30px;
font-wieght: normal;
display: table-cell;
vertical-align: middle;
height: 100%;
}
nav {
margin: 0 auto;
padding-top: 10px;
text-align: center;
width: 100%;
height: 40px;
position: fixed;
z-index: 10;
top: 0;
background: #555;
}
a {
margin: 0 auto;
text-align: center;
font-family: helvetica;
font-size: 20px;
line-height: 30px;
font-wieght: normal;
display: inline-block;
height: 30px;
width: 200px;
text-decoration: none;
color: #fff;
transition: color 500ms;
}
a:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navigation">
<a href="#" data-scrollto="section-one">Section One</a> | <a href="#" data-scrollto="section-two">Section Two</a> | <a href="#" data-scrollto="section-three">Section three</a>
</nav>
<div class="sections" id="section-one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p>
</div>
<div class="sections two" id="section-two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p>
</div>
<div class="sections" id="section-three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus neque, ducimus pariatur odio architecto excepturi, enim non recusandae, temporibus facilis eveniet nulla quo laudantium, alias quos in aliquam delectus dolore!<br /><br /><a href="#" class="back">Back to top</a></p>
</div>
关于javascript - 通过菜单按钮滚动时 JavaScript 出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45602216/