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

Page loads by sliding down vertically

本文关键字：加载 垂直      更新时间：2023-09-26

我很想知道并尝试拥有它，这样一旦用户单击我菜单中的链接，页面就会从页面顶部垂直滑动加载EG；点击链接>新页面很好地（可能会放松）到框架顶部的位置。

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

我正在Wordpress网站上尝试这样做。

有什么建议吗

源于以下原始问题：通过WP中的包装器获取页面内容以在中滑动

以下是我如何在我们的一个网站上做到这一点的快速、几乎完全无代码的解释。。。

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

对于wordpress，你需要创建一个ajax处理程序来查询你的帖子、页面或你正在加载的任何内容。你首先创建一个新页面，并将其命名为ajax_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>

和css：

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

这个答案假设你对自己在做什么有一些想法。我没有测试过任何东西，但今天我真的帮助别人做了同样的东西。html和css可能有所不同，但概念仍然相同。希望能有所帮助。

相关文章：