저는 현재 언어 선택기를 표시하는 첫 번째 페이지가있는 웹 사이트를 디자인하고 있으며, 선택한 언어에 따라 해당 버전의 홈페이지로 이동해야합니다. '언어 선택기'페이지가 위로 스크롤되고 적절한 '홈페이지'로 이동하도록 이러한 페이지 사이의 전환을 애니메이션으로 만들고 싶습니다.
저는 코딩을 처음 접했지만 jQuery의 기본을 이해하고 jQuery 기반 솔루션을 사용할 수 있습니다. 아직 제가 원하는 방법에 맞는 방법을 찾는 데 성공하지는 못했습니다.
내 작업 웹 사이트 인 http://bauti.tk 를 보면 '언어 선택기'페이지에 검은 색 배경이있는 것을 볼 수 있습니다. 스크롤 할 때 '홈페이지'상단에있는 검은 색 메뉴 표시 줄과 최대한 원활하게 연결하고 싶습니다.
'홈페이지'에서 메뉴 이외의 내용이로드되는 방식은 저에게별로 중요하지 않습니다. 동일한 웹 페이지의 섹션을 스크롤하는 데 기반한 많은 솔루션을 보았지만 대상 웹 페이지가 언어 선택에 따라 달라지기 때문에 저에게는 작동하지 않을 것 같습니다.
난이도에 관계없이 모든 작업 솔루션을 환영합니다!
이 솔루션을 위해 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이 실제로 변경되지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다