Question

我有两个功能。我想要将它们组合在一起，这样当你从左向右移动（反之亦然）时，它没有延迟（就像向下滚动功能一样）。

$(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>

Answer 1

正如您所看到的，当您点击＆＃34;向下＆＃34;它会立即进入div 指向链接。但是，当点击＆＃34; Go Right＆＃34;和＆＃34;去左＆＃34;有一段时间我不知道它会从哪里来。

你首先在这个元素上调用滚动顶部，即使它滚动到相同的值（意味着垂直滚动到0）也需要一秒钟才能完成。 animate()方法使用fx队列，因此所有动画都放在队列中，一次只运行一个。

＆＃13;

$(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;
      }
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

尝试调整选择器，首先将#SectionRight a，#SectionLeft a添加到:not() .animate();在第二个'#SectionLeft a, #SectionRight a'

使用.animate()

$(function() {
  $('a[href*=#]:not([href=#], #SectionLeft a, #SectionRight a)').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(){
    $('#SectionLeft a, #SectionRight a').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>

延迟后运行的JS函数

2 个答案: