jQuery를 사용하여 페이지를 앵커로 스크롤하거나 아래로 이동하는 방법은 무엇입니까?
페이지 위쪽 또는 아래쪽 로컬 앵커에 대한 링크를 클릭할 때 슬라이드 효과를 포함하는 방법을 찾고 있습니다.
저는 당신이 다음과 같은 링크를 가지고 있는 것을 원합니다.
<a href="#nameofdivetc">link text, img etc.</a>
이 링크를 슬라이딩 링크로 사용할 수 있도록 클래스가 추가된 경우:
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
그런 다음 이 링크를 클릭하면 페이지가 필요한 위치(div, 제목, 페이지 맨 위 등)로 위 또는 아래로 이동합니다.
이것이 제가 이전에 가졌던 것입니다.
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
});
});
묘사
다음을 사용하여 이 작업을 수행할 수 있습니다.jQuery.offset()그리고.jQuery.animate().
jsFiddle 데모를 확인하십시오.
샘플
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');
추가 정보
href 속성이 같은 이름의 태그 ID를 가진 div에 연결되어 있다고 가정하면 다음 코드를 사용할 수 있습니다.
HTML
<a href="#goto" class="sliding-link">Link to div</a>
<div id="goto">I'm the div</div>
Javascript - (JQuery)
$(".sliding-link").click(function(e) {
e.preventDefault();
var aid = $(this).attr("href");
$('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});
function scroll_to_anchor(anchor_id){
var tag = $("#"+anchor_id);
$('html,body').animate({scrollTop: tag.offset().top},'slow');
}
이것은 제 삶을 훨씬 더 편하게 만들었습니다.당신은 기본적으로 많은 코드 없이 요소 ID 태그와 그 스크롤을 거기에 넣습니다.
http://balupton.github.io/jquery-scrollto/
Javascript에서
$('#scrollto1').ScrollTo();
html
<div id="scroollto1">
여기 나는 페이지를 쭉 따라갑니다.
또한 대상에 패딩이 있으므로 다음을 사용해야 합니다.position대신에offset대상과 중복되지 않을 수 있는 탐색 모음도 고려할 수 있습니다.
const $navbar = $('.navbar');
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
const scrollTop =
$($(this).attr('href')).position().top -
$navbar.outerHeight();
$('html, body').animate({ scrollTop });
})
jQuery를 사용한 내 접근 방식은 즉시 점프하는 대신 내장된 모든 앵커 링크를 슬라이드로 만드는 것입니다.
산티 누네즈의 답과 정말 비슷하지만 더 신뢰할 수 있습니다.
지지하다
- 다중 프레임워크 환경.
- 페이지 로드가 완료되기 전입니다.
<a href="#myid">Go to</a>
<div id="myid"></div>
// Slow scroll with anchors
(function($){
$(document).on('click', 'a[href^=#]', function(e){
e.preventDefault();
var id = $(this).attr('href');
$('html,body').animate({scrollTop: $(id).offset().top}, 500);
});
})(jQuery);
여기 저에게 효과가 있었던 해결책이 있습니다.이 기능은 모든 시스템에 적용되는 일반적인 기능입니다.a이름이 지정된 태그a
$("a[href^=#]").on('click', function(event) {
event.preventDefault();
var name = $(this).attr('href');
var target = $('a[name="' + name.substring(1) + '"]');
$('html,body').animate({ scrollTop: $(target).offset().top }, 'slow');
});
참고 1: 큰따옴표를 사용해야 합니다."당신의 html에서.단일 따옴표를 사용하는 경우 코드의 위 부분을 다음으로 변경합니다.var target = $("a[name='" + name.substring(1) + "']");
참고 2: 경우에 따라, 특히 부트스트랩의 스틱 바를 사용할 때, 명명된a탐색 모음 아래에 숨습니다.이러한 경우(또는 유사한 경우)에는 스크롤에서 픽셀 수를 줄여 최적의 위치에 도달할 수 있습니다.예:$('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');당신을 데리고 갈 것입니다.target위쪽에 15픽셀이 남아 있습니다.
저는 원래 코드를 고수했고, 이 코드를 사용하여 '백 투 톱' 링크에 페이드를 포함했습니다.
http://webdesignerwall.com/tutorials/animated-scroll-to-top
잘 작동합니다 :)
가장 간단한 방법은 다음과 같습니다.
클릭 기능(Jquery) 내 : -
$('html,body').animate({scrollTop: $("#resultsdiv").offset().top},'slow');
HTML
<div id="resultsdiv">Where I want to scroll to</div>
전체 페이지가 아니라 일부 중첩된 콘텐츠를 애니메이션화하는 경우 오프셋Top 및 스크롤Top 값을 추가할 수 있습니다.
예:
var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop
this.manage_list_wrap.animate({
scrollTop: y
}, 1000);
SS 느린 스크롤
이 솔루션에는 앵커 태그가 필요하지 않지만 메뉴 단추(예: 임의 속성, 'ss')를 HTML의 대상 요소 ID와 일치시켜야 합니다.
ss="about"합니다.id="about"
$('.menu-item').click(function() {
var keyword = $(this).attr('ss');
var scrollTo = $('#' + keyword);
$('html, body').animate({
scrollTop: scrollTo.offset().top
}, 'slow');
});.menu-wrapper {
display: flex;
margin-bottom: 500px;
}
.menu-item {
display: flex;
justify-content: center;
flex: 1;
font-size: 20px;
line-height: 30px;
color: hsla(0, 0%, 80%, 1);
background-color: hsla(0, 0%, 20%, 1);
cursor: pointer;
}
.menu-item:hover {
background-color: hsla(0, 40%, 40%, 1);
}
.content-block-header {
display: flex;
justify-content: center;
font-size: 20px;
line-height: 30px;
color: hsla(0, 0%, 90%, 1);
background-color: hsla(0, 50%, 50%, 1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
<div class="menu-item" ss="about">About Us</div>
<div class="menu-item" ss="services">Services</div>
<div class="menu-item" ss="contact">Contact</div>
</div>
<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.
That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>피들
https://jsfiddle.net/Hastig/stcstmph/4/
저는 https://css-tricks.com/snippets/jquery/smooth-scrolling/ 에서 코드의 모든 줄을 설명하는 이 예를 우연히 발견했습니다.저는 이것이 가장 좋은 선택이라고 생각했습니다.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
기본값으로 사용할 수 있습니다.
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
window.scrollBy({
top: 100, // could be negative value
left: 0,
behavior: 'smooth'
});
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
또는 jquery와 함께:
$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&& location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
}
});
$(function() {
$('a#top').click(function() {
$('html,body').animate({'scrollTop' : 0},1000);
});
});
여기서 테스트:
다음과 같은 해결책이 저에게 효과가 있었습니다.
$("a[href^=#]").click(function(e)
{
e.preventDefault();
var aid = $(this).attr('href');
console.log(aid);
aid = aid.replace("#", "");
var aTag = $("a[name='"+ aid +"']");
if(aTag == null || aTag.offset() == null)
aTag = $("a[id='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 1000);
}
);
언급URL : https://stackoverflow.com/questions/8579643/how-to-scroll-up-or-down-the-page-to-an-anchor-using-jquery
'programing' 카테고리의 다른 글
| "헤드-n-3"에 해당하는 PowerShell? (0) | 2023.08.13 |
|---|---|
| MySQL Workbench 스키마 패널이 작동하지 않음 (0) | 2023.08.13 |
| 위치 서비스를 사용할 수 있는지 확인 (0) | 2023.08.08 |
| 경로의 대상에 파일을 만들지 않고 Python에서 경로가 유효한지 확인합니다. (0) | 2023.08.08 |
| 통합 테스트 Spring MVC 컨트롤러에 전체 개체 POST (0) | 2023.08.08 |