简单的HTML5方法，可以在带有导航的垂直幻灯片中垂直拆分网站页面

Question

>你知道一种使用 html5 部分标签、锚点、CSS 和 js 在简单的垂直滑动幻灯片中拆分网页的方法吗？

如果我只是放置section标签，这些部分不会占据页面的整个高度，用户可以在同一视口上放置多个部分。

我希望每个部分在客户端浏览器中都是全宽和全高，无论他的屏幕尺寸如何。

谢谢

Answer 1

您

需要做的就是使用链接将您带到相关部分，例如：

<a  href="#slide1">Slide 1</a>
<a  href="#slide2">Slide 2</a>
<a  href="#slide3">Slide 3</a>
<section id="slide1" class="slide">
    <h1>section 1</h1>
    <p>This is a section</p>
</section>
<section id="slide2" class="slide">
    <h1>section 2</h1>
    <p>This is a section</p>
</section>
<section id="slide3" class="slide">
    <h1>section 3</h1>
    <p>This is a section</p>
</section>

使用 css ：

body, html {
  height: 100%;
}
.slide {
  height: 100%;
}
section{
    margin-bottom:400px;
}

要获得平滑滚动，您可以使用此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({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

演示：http://jsfiddle.net/vA9ga/4/