我可以使视差幻灯片在页面的中间而不是顶部停下来吗？

Question

I have created a basic Parallax website here:

www.hrmny.co.uk

The background images are fine, just how i want them.

I want to change the white slides, when sliding from bottom to top, is there a way to automatically stops halfway up the page instead of stopping at the top? I can post snippets of code to help, just tell me what you would like to see. I'm new to this.

Thanks for the help

Answer 1

a cheaty way :

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

It is not really the half way, it happens to be the middle until you change the page's content :)

But how do you trigger the slide back up? Clicking on "home" link ? And then, you want to stop halfway instead of getting to the top ?

so.. if the user is at the bottom of the page find a way to know that you want to change the "home" link to go to the "services" section?

Answer 2

In addition to the target position you need to get the height of the viewport and the element you want to scroll to:

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

Then adjust the target position by subtracting half the viewport height and adding half the element height:

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

I also moved the code for getting the position and heights into the click function so that it is calculated each time the user clicks, in case the user has resized the browser window or the element has changed position or height.

This is the final code from your site with the changes:

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