アニメーションスクロールを2つの異なるページ間で切り替える方法はありますか？

Question

私は現在、言語セレクタを表示する最初のページがあるウェブサイトを設計しています。これは、選択した言語に応じてホームページの対応バージョンに移動する必要があります。これらのページ間の遷移をアニメーション化して、「言語セレクタ」ページがスクロールアップし、適切な「ホームページ」に移動するようにしたいと思います。

私は本当にコーディングが新しくなっていますが、jQueryの基本を理解し、jQueryベースのいくつかのソリューションを用意していますが、私が望むものに合った方法を見つけることに成功しませんでした。

私の使用しているウェブサイトhttp://bauti.tkを見ると、「言語セレクタ」ページに黒い背景が表示されます。できるだけシームレスに「ホームページ」の上にある黒のメニューバーをスクロールして参加したいと思います。

「ホームページ」のメニュー以外のコンテンツは、私にとって本当に重要ではありません。私は、同じWebページのセクションをスクロールすることに基づく多くのソリューションを見てきましたが、ターゲットWebページは言語の選択に依存するため、私にとってはうまくいかないと思います。

問題解決のための解決方法はありません。

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を変更するために必要なコードを置かない限り、実際にはURLは変更されません。