내 페이지에 몇 개의 하이퍼 링크가 있습니다. 사용자가 내 도움말 섹션을 방문 할 때 읽을 수있는 FAQ입니다.
앵커 링크를 사용하여 페이지를 앵커쪽으로 스크롤하여 사용자를 안내 할 수 있습니다.
스크롤을 부드럽게 만드는 방법이 있습니까?
그러나 그는 사용자 정의 JavaScript 라이브러리를 사용하고 있습니다. 아마도 jQuery는 이와 같은 것을 제공합니까?
답변
2018 년 4 월 업데이트 : 이제이 작업을 수행하는 기본 방법이 있습니다 .
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});이것은 현재 가장 최신 브라우저에서만 지원됩니다.
이전 브라우저 지원을 위해이 jQuery 기술을 사용할 수 있습니다.
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});그리고 여기 바이올린이 있습니다 : http://jsfiddle.net/9SDLw/
대상 요소에 ID가없고로 ID를 연결하는 경우 다음을 name사용하십시오.
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);
return false;
});성능을 향상 시키 려면 앵커를 클릭 할 때마다$('html, body') 실행되지 않도록 해당 선택기를 캐시해야합니다 .
var $root = $('html, body');
$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});URL을 업데이트하려면 animate콜백 내에서 수행하십시오 .
var $root = $('html, body');
$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});답변
올바른 구문은 다음과 같습니다.
//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
$('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});단순화 : 건조
function smoothScrollingTo(target){
$('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});설명 href*=\\#:
답변
CSS3의 새로운 매력. 이것은이 페이지에 나열된 모든 방법보다 훨씬 쉽고 Javascript가 필요하지 않습니다. 아래 코드를 CSS에 입력하면 모든 갑자기 링크가 자신의 페이지 내부 위치를 가리키며 부드러운 스크롤 애니메이션이 생깁니다.
html{scroll-behavior:smooth}그 후 div를 가리키는 링크는 해당 섹션으로 부드럽게 움직입니다.
<a href="#section">Section1</a>편집 : 위의 태그에 대해 혼란스러워하는 사람들을 위해. 기본적으로 클릭 가능한 링크입니다. 그런 다음 웹 페이지 어딘가에 다른 div 태그를 넣을 수 있습니다
<div classname="section">content</div>이와 관련하여 링크를 클릭 할 수 있으며 # 섹션으로 이동합니다.이 경우 섹션이라고하는 div입니다.
BTW, 나는 이것을 작동시키기 위해 몇 시간을 보냈다. 모호한 의견 섹션에서 해결책을 찾았습니다. 버그가 있었고 일부 태그에서는 작동하지 않습니다. 몸에서 일하지 않았다. CSS 파일의 html {}에 넣을 때 마침내 작동했습니다.
답변
$('a[href*=#]').click(function(event){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
event.preventDefault();
});이것은 나를 위해 완벽하게 일했다
답변
브라우저 위치 해시를 일치시키는 업데이트를 처리하는 기본 솔루션을 게시 한 사람이 아무도 없습니다. 여기있어:
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) { // relitere
item.addEventListener('click', (e)=> {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
history.pushState(null, null, hashval)
e.preventDefault()
})
}학습서 참조 : http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml
고정 헤더가있는 사이트의 경우 scroll-padding-topCSS를 사용하여 오프셋을 제공 할 수 있습니다.
답변
CSS 만
html {
scroll-behavior: smooth !important;
}이것 만 추가하면됩니다. 이제 내부 링크 스크롤 동작이 스트림 흐름처럼 매끄 럽습니다.
참고 : 모든 최신 브라우저 ( Opera, Chrome, Firefox등)이 기능을 지원합니다.
자세한 내용은이 기사를 읽으십시오.
답변
이 일반적인 코드를 작성하는 것이 좋습니다.
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;});jquery-effet-smooth-scroll-defilement-fluide : 여기에서 아주 좋은 기사를 볼 수 있습니다