向下滑动多页内容答案

【问题标题】：Slide Down Content of Multiple Pages向下滑动多页内容
【发布时间】：2016-10-26 02:56:16
【问题描述】：

我正在尝试根据这篇文章制作一个向下滑动的菜单： http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

上面的例子展示了如何在单页上制作幻灯片。

现在，例如我有多个这样的页面：

index.php

关于.php

contact.php

问题：是否可以在上面的多/三页上制作幻灯片内容？

CMIIW

【问题讨论】：

标签： php css html

【解决方案1】：

为了使站点按您希望的方式运行，您需要从每个页面中获取内容并将它们作为部分放在 index.php 页面上。每个部分都有一个唯一的 ID，如下所示：

<div class="section about" id="about">
  -- about.php content goes here
</div>
<div class="section contact" id="contact">
 -- contact.php page content goes here --
</div>

然后在你的jquery中输入以下代码：

// Jump to target function
    $('a[href^="#"]').on('click',function (e) {
        var href = $(this).attr('href');
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });

    });

在您的导航中，您将链接放置为

<a href="#about">About Us</a>

当您单击该链接将您带到页面的该部分时，您将看到滚动效果。

【讨论】：