两个独立的html文件之间的平滑滑动过渡

Smooth slide transition between two separate html files

本文关键字：平滑 之间 文件 html 两个 独立      更新时间：2023-09-26

是否有可能在两个独立的HTML文件之间进行平滑的滑动过渡?比如。其中一个html是

<a href="secondHtml.html">Link</a>

和点击此链接页面后不重新加载，只是滑动到第二个文件?

您必须通过ajax将第二个HTML文件加载到iFrame或div中，然后将其滑动到视图中。您可以使用jQuery来实现这一点，并方便地访问动画。

您可能还想更新您的页面的URL，因为您可以使用location.hash来做它而无需重新加载页面。你也可以检查observehashchange plugin为jquery检查哈希变化时，用户更改URL。

您可以在这里查看示例。

为了让Google访问这些页面，你可以在你的网站上添加一个sitemap.xml来描述这些页面，你也可能需要设置网站管理员工具来向Google提供关于你的网站的有用信息。在这里，你可以添加链接，谷歌会得到它。我有一个页面，其中超过5000个链接被谷歌看到，但他们没有在任何页面默认

但是如果你想在你的页面上有正常的<a>链接，你可以使用一个简单的jQuery来触发动画，而不是去链接。

<a href="/page2">Go to page 2</a>
<a href="/page3">Go to page 3</a>
<a href="/page4">Go to page 4</a>
<script>
    function LoadPage(page) {
        //Put your page loader script here        
    }
    $(document).ready(function(){
        $(a).click(function(event){
            event.preventDefault();
            var page = $(this).attr('href').substr(1);
            LoadPage(page);
        });
    });
</script>
相关文章：