jQuery:URL을 호출할 때 앵커로 스크롤하고 브라우저 동작을 대체합니다.
문제
나는 이미 jQuery 플러그인 ScrollTo를 알고 있지만 지금까지 다음을 실현할 수 있는 방법을 찾지 못했습니다.
사용자가 내 사이트에 접속합니다(내 페이지의 링크를 클릭하는 것이 아니라 입력을 통해) domain.com/bla.php#foo
앵커 "#foo"가 존재합니다.이제 사용자의 브라우저가 자동으로 "#foo"로 스크롤되지 않기를 원합니다. 대신 '#foo' 요소가 뷰의 절대 상단 위치가 아닌 뷰 중앙에 있도록 부드럽게 스크롤하고 싶습니다. 사용자 보기.
지금까지 감사했습니다!
해결책
실제 앵커를 생성하지 않는 경우 foo
, 오히려 다음과 같은 ID로 앵커를 만듭니다. _foo
(뭔가 <a id="_foo">
).당신은 처리할 수 있습니다 $(document).ready
이것을 달성하기 위해.
(의사 코드)와 같은 것
$(document).ready(function() {
var elem = $('#_' + window.location.hash.replace('#', ''));
if(elem) {
$.scrollTo(elem.left, elem.top);
}
});
다른 팁
Jan Jongboom의 스크립트를 약간 향상 시켰으므로 이제 다음과 같습니다.
$(document).ready(function () {
// replace # with #_ in all links containing #
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
});
// scrollTo if #_ found
hashname = window.location.hash.replace('#_', '');
// find element to scroll to (<a name=""> or anything with particular id)
elem = $('a[name="' + hashname + '"],#' + hashname);
if(elem) {
$(document).scrollTo(elem, 800);
}
});
JavaScript가없는 사용자의 경우 동작이 그대로 유지됩니다.
MachineGhost의 대답은 매우 도움이되었습니다. 함께 패치 한 코드는 URL 매개 변수를 가져 와서 브라우저가 해시 태그로 바꾸어 DOM이 준비 되 자마자 스크롤합니다.
URL은 다음과 같습니다.
www.mysite.com/hello/world.htm?page=contact
연락처는 스크롤하려는 ID의 이름입니다.
<h1 id="contact">Contact Us</h1>
코드는 다음과 같습니다.
// Get any params from the URL
$.extend({
getUrlVars: function(){
var vars = [], hash;
var url = decodeURIComponent(window.location.href);
var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
$(document).ready(function() {
// Unhide the main content area
$('section.centered').fadeIn('slow');
// Create a var out of the URL param that we can scroll to
var page = $.getUrlVar('page');
var scrollElement = '#' + page;
// Scroll down to the newly specified anchor point
var destination = $(scrollElement).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
return false;
});
나는 이것을 Chrome과 FF에서 확인했고 매우 잘 작동했습니다. 스크롤 대상이 원하는 정확한 장소로 이동하지 않으면 "대상 -75"조정해보십시오.
위의 게시물을 사용하여 할 수 없었으므로 감사합니다!
/* scrolling to element */
var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
$('a').click(function(){
var hashEle = $(this).attr('href').split('#');
if (hashEle.length > 1) {
if (hashEle[1] == 'top') {
$('body, html').animate({
scrollTop: 0
},500);
} else {
jQuery('body, html').animate({
scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
},500);
}
};
})
// find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
if(hashname == 'top') {
$('body, html').animate({
scrollTop: 0
},200);
} else {
$('body, html').animate({
scrollTop: $(elem).offset().top - headerHeight
},500);
}
};
/* END scrolling to element */
이 스크립트는 $ (document) .ready (function () {})에 있어야합니다.
스크롤토를 사용할 수 있습니다. 앵커가없는 상태에서 페이지를 렌더링 한 다음 페이지를로드 할 때 실행되는 JavaScript를 사용하여 URL에서 앵커를 가져옵니다. 그런 다음 해당 텍스트를 사용하여 특정 ID로 스크롤 할 수 있습니다.
페이지 중간에 항목을 가져 오는 방법을 잘 모르겠지만 스크롤에 대한 오프셋을 지정할 수 있습니다.
나는 이것이 불가능하다고 말하고 싶지 않지만 ... 적어도 아주 어려울 것입니다. 페이지의 일부가로드 되 자마자 브라우저 (또는 내가 아는 브라우저)가 앵커 포인트로 스크롤합니다. afaik이를 피할 수있는 JavaScript 기반 방법이 없습니다 (브라우저 플러그인이나 무언가가 필요합니다).
그러나 "페이지가 완전히로드 될 때까지 페이지를 표시하지 마십시오"스크립트의 변형을 사용할 수 있다고 생각합니다. 다시 말해, 당신은 다음과 같습니다.
모든 페이지의 컨텐츠를 사전로드 (예 : 전체 페이지를 감싸는 DIV가있어서) "디스플레이 : 없음"스타일을 넣으십시오)
"Onload"이벤트 핸들러를 페이지에 첨부하여 DIV를 숨기고 ...
동일한 "Onload"이벤트 핸들러에서 표준 JS 스크롤 메커니즘 (예 : Scrollto)을 사용하여 앵커로 스크롤합니다 (Window.Location을 확인하여 스크롤 할 앵커를 결정할 수 있다고 생각합니다).
이론적으로, 브라우저는 #1과 #2 사이의 브라우저 스크롤이기 때문에 (그리고 스크롤 할 곳이 없기 때문에, 내용이 숨겨져있는 것과 모든 것이 전혀 아무것도하지 않을 것이라고 생각합니다), 스크롤 메커니즘은 스크롤 메커니즘입니다. #3에 사용하는 것은 간섭이 없어야합니다.
즉, 위의 모든 것은 완전히 테스트되지 않은 계획; 당신의 마일리지가 다릅니다. 작동하더라도 구현하기가 고통 스러울 것입니다. 진짜 이 행동을 원한다면, 거의 확실히 문제가되지 않습니다.
그건 불가능하다
편집하다
행동은 완전히 UA의 손에 있습니다.