我能让视差滑动停止在页面的中间而不是顶部吗?

Can i make a parallax slide stop halfway up the page instead of the top?

本文关键字：中间 顶部 视差      更新时间：2023-09-26

我在这里创建了一个基本的视差网站:

www.hrmny.co.uk

背景图片很好，就像我想要的。

我想更改白色幻灯片，当从底部到顶部滑动时，是否有一种方法可以自动停止在页面的一半，而不是在顶部停止?我可以张贴代码片段来帮助，只要告诉我你想看到什么。我是新手。

Thanks for the help

一种欺骗的方式:

$("a[href=#slide4]").click()

这不是真正的中间，它恰好是中间，直到你改变页面的内容:)

但是怎样才能让滑梯重新滑上来呢?点击"主页"链接?然后，你想中途停下来，而不是到达顶部?

. .如果用户在页面的底部找到一种方法来知道你想改变"home"链接到"services"部分吗?

除了目标位置，你还需要获得视口的高度和你想要滚动到的元素:

var targetOffset = $target.offset().top;
var targetHeight = $target.outerHeight();
var viewportHeight = window.innerHeight;

然后通过减去一半的视口高度和添加一半的元素高度来调整目标位置:

var scrollTo = targetOffset + Math.round(targetHeight / 2) - Math.round(viewportHeight / 2);

我还将获取位置和高度的代码移动到click函数中，以便在用户每次单击时计算位置和高度，以防用户调整了浏览器窗口的大小或元素改变了位置或高度。

这是您网站的最终代码，修改如下:

// JQUERY FOR SLIDING NAVIGATION   
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {
        // JQUERY CLICK FUNCTION REMOVE AND ADD CLASS "ACTIVE" + SCROLL TO THE #DIV   
        $(this).click(function() {
          var targetOffset = $target.offset().top;
          var targetHeight = $target.outerHeight();
          var viewportHeight = window.innerHeight;
          var scrollTo = targetOffset + Math.round(targetHeight / 2) - Math.round(viewportHeight / 2);
          $("#nav li a").removeClass("active");
          $(this).addClass('active');
          $('html, body').animate({scrollTop: scrollTo}, 1000);
          return false;
        });
      }
    }
  });
});
相关文章：