Javascript 通过垂直向下滑动加载页面

我想知道并尝试让它这样，一旦用户单击我菜单中的链接，页面就会从页面顶部垂直滑入来加载；点击链接>新建页面（可能会放松），从框架顶部进入位置

我知道在jQuery中使用.slide是可能的，但到目前为止我没有任何运气

我正试图在Wordpress网站上这样做

有什么建议吗？

---

源于原始问题：

这里有一个快速、几乎完全没有代码的解释，说明我是如何在我们的一个网站上做到这一点的

需要jQuery、基本ajaxing和自定义模板

对于wordpress，您需要创建一个ajax处理程序来查询您的帖子、页面或正在加载的内容。您首先创建一个新页面，并将其命名为ajax\u handler或任何您认为有用的名称。然后将该页面设置为私有，这样它就不会显示在菜单中

然后您需要创建一个自定义处理程序，在本例中，它只是一个自定义模板。要做到这一点，您可以复制page.php并将其重命名为ajax_handler.php，然后添加标准模板注释，使其显示在模板列表中，并删除特定于page.php文件的任何内容-基本上清空该文件，以便此时不调用任何不需要的内容，但保留基本的wp直接调用规定地点

然后将该模板分配给新页面

在这个页面中，你可以做一个简单的陈述，如

if(isset($_GET['request']))
{
    switch($_GET['request'])
    {
        case "article":
            // run the wp query to fetch whatever it is you're trying to load in

            die(json_encode(array("title" => "test", "body" => "sample content")));

            // obviously you would encode the results from the query
        break;
        default:

        break;
    }
}

然后在您的站点上，您将有一个jquery侦听器或事件来进行ajax调用

$(document).ready(function(){
    $('#link').on('click', function(){
        $.ajax({
            'url': 'http://www.yourdomain.com/ajax_handler', //whatever your permalink to that new page is
            'type': 'get',
            'data': {id:'1', request: 'article'}, //whatever the id is you want. You can fetch this any number of ways so I assume you know how to do it
            'dataType': 'json',
            'success': function(data){
                $('#slider_div h1').html(data.title);
                $('#slider_div p').html(data.body);
                $('#slider_div').animate({top: '0%'}, 1000);
            }
        });
    });
});

最后，您的html将有一个简单的div，它只是用基本的css推到页面上方

<div id="slider_div">
    <h1>title to replace</h1>
    <p>body text to replace</p>
</div>

---

这个答案假设你对自己正在做的事情有所了解。我没有测试过任何东西，但实际上我今天帮助了别人做了同样的东西。html和css可能有所不同，但概念仍然相同。希望有帮助。

请不要发布重复的问题。可能的问题重复

#slider_div{
    width:100%;
    height:100%;
    background:#fff;
    position:absolute;
    z-index:999;
    top:-100%;
}