Question

我的问题是关于水平滚动1页网站。我使用jQuery进行滚动。当您单击导航菜单中的链接时，您将转到该部分，但它完全显示在屏幕的右侧。

我是jQuery的新手，我希望屏幕中心的链接部分。现在有人怎么做到这一点？

以下是我正在使用的代码：

$(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({
          scrollLeft: target.offset().left
        }, 1000);
               return false;
      }
    }     
  });
});

Answer 1

这更像是一个CSS问题，您还可以通过使用CSS3过渡来实现更高效的滚动。因此，不是使用jQuery的动画函数，而是使用jQuery设置CSS left属性并设置CSS以使该元素具有动画效果。关于居中，你需要一个元素（例如div）作为你的面具，宽度，隐藏溢出，位置相对和边距：0 auto;在CSS中设置它。然后你的元素就是你的滑块，并且是你设置左边属性的元素以及位置绝对和css过渡。以下是一个示例：http://jsfiddle.net/q255npgr/1/

.item {
    width: 48px;
    height: 48px;
    border: 1px solid red;
    background: black;
    float: left;
    color: #FFF;
}
#mask {
    width: 70px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
#slider {
    top: 0;
    left: 0;
    position: absolute;
    transition: 1s left;
    width: 30000px;
    height: 50px;
}


var posish = 0;

$('#right').click(function(){
    $('#slider').css('left', posish -= 50);
});
$('#left').click(function(){
    $('#slider').css('left', posish += 50);
});


<div id="mask">
    <div id="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>
<button id="left"><</button>
<button id="right">></button>

加载链接中心jquery

1 个答案: