Smooth slide transition between two separate html files

问题

is there any possibility to make smooth slide transition between two seperate html files? Like for example. On one html is

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

and after clicking this link page is not reloading, just sliding to the second file?

回答1:

You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.

You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.

You can view a sample here.

To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.

But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.

<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>

来源：https://stackoverflow.com/questions/31899278/smooth-slide-transition-between-two-separate-html-files

标签

javascript

jquery

html

ajax

slide