我有两个功能。我想将它们组合起来,以便当您从左到右移动(或反之亦然)时,它不会有延迟(就像向下滚动功能一样)。
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
$(function(){
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().left;
$('html,body').animate({scrollLeft: targetOffset}, 1000);
return false;
}
}
});
});
body{
padding:0;
margin:0;
overflow:hidden;
}
#Home{
position:relative;
width:100vw;
height:100vh;
background-color:#FFF;
}
#SectionLeft{
position:relative;
width:100vw;
height:100vh;
background-color:#989898;
float:left;
}
#SectionRight{
position:relative;
margin-left:100vw;
width:100vw;
height:100vh;
color:000;
background-color:#838383;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="Home">
<a href="#SectionLeft">Go Down</a>
</div>
<div id="SectionLeft">
<a href="#SectionRight">Go Right</a>
</div>
<div id="SectionRight">
<a href="#SectionLeft">Go Left</a>
</div>
最佳答案
As you can see when you click "Go down" it immediately goes to the div directed in the link. However, when clicking on "Go Right" and "Go Left" there is a delay that I am not sure from where it is coming.
您首先在此元素上调用滚动顶部,即使它滚动到相同的值(意味着垂直滚动到 0),也需要一秒钟才能完成。 animate()
方法使用 fx 队列,因此所有动画都放入队列中,一次只运行一个。
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top,
scrollLeft: target.offset().left
}, 1000);
return false;
}
}
});
});
body{
padding:0;
margin:0;
overflow:hidden;
}
#Home{
position:relative;
width:100vw;
height:100vh;
background-color:#FFF;
}
#SectionLeft{
position:relative;
width:100vw;
height:100vh;
background-color:#989898;
float:left;
}
#SectionRight{
position:relative;
margin-left:100vw;
width:100vw;
height:100vh;
color:000;
background-color:#838383;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="Home">
<a href="#SectionLeft">Go Down</a>
</div>
<div id="SectionLeft">
<a href="#SectionRight">Go Right</a>
</div>
<div id="SectionRight">
<a href="#SectionLeft">Go Left</a>
</div>
关于javascript - 延迟后运行的JS函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33016700/