有没有办法在两个不同的页面之间制作动画滚动过渡？

Question

我目前正在设计一个网站，其中我有一个显示语言选择器的第一页，它会根据所选语言将您带到相应版本的主页。我想为这些页面之间的过渡设置动画，以便 'language selector' 页面向上滚动并让位给适当的 'homepage'。

我真的是编码新手，但我可以理解 jQuery 的基础知识并获得了一些基于 jQuery 的解决方案，尽管我还没有成功找到方法这符合我想要的。

如果您查看我的工作网站 http://bauti.tk，您会看到 'language selector' 页面有黑色背景。我想尽可能无缝地加入滚动时 'homepage' 顶部的黑色菜单栏。

'homepage' 加载菜单以外的内容的方式对我来说并不重要。我见过许多基于滚动浏览同一网页各部分的解决方案，但我想这对我不起作用，因为目标网页取决于语言选择。

欢迎任何可行的解决方案，无论其难度如何！

Answer 1

您可能需要查看 ajax 以了解此解决方案。基本上在选择时在着陆页下方加载所选语言的主页，然后向下滚动以显示加载的内容。

类似于：

var lang;
$(".ThumbGroup span").find("a").off("click","a").on({
    click: function(e){
        e.preventDefault();
        if(($(this).attr("id") == "u2008-4") || ($(this).attr("id") == "u2003")){
            lang = "cat-home.html"
        }else if($(this).attr("id") == "u2009"){
            lang = "en-home.html";
        }else if($(this).attr("id") == "u2005"){
            lang = "zh-home.html";
        }

        $.get({"http://bauti.tk/"+lang, function(data) {
            $("#page").append(data);

            //Add scroll effect here using .scroll() method.
            //https://api.jquery.com/scroll/

        });
    }
},"a");

您需要对这段代码进行一些自定义，但它可以作为您的样板文件。

但是请记住，当使用 ajax 时，url 不会在您单击链接时实际更改，除非您放置必要的代码来更改它。

有没有办法在两个不同的页面之间制作动画滚动过渡？

Is there a way to make an animated scroll up transition between two different pages?

html

javascript

css

jquery

transition