클릭하면 JS 파일에 연결된 링크로 이동하기 전에 부드러운 스크롤이 발생하도록 smoothScroll 클래스를 추가하려는 아래쪽 버튼 div가 있습니다. 나는 그것을 시도 할 때마다 window.location 전에 addClass를 실행하는 방법을 잘 모르겠습니다.
HTML :
<div id="downButton">
<i class="fa fa-angle-down"></i>
</div>
JS :
$(function() {
// This will select everything with the class smoothScroll
// This should prevent problems with carousel, scrollspy, etc...
$('.smoothScroll').click(function() {
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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000); // The number here represents the speed of the scroll in milliseconds
return false;
}
}
});
});
});
$('#downButton').click(function () {
window.location = '#aboutSection';
});
이 작업을 빠르게 수행하는 가장 쉬운 방법은 다음과 같습니다.
$(function(){
$('#downButton').click(function () {
var target = $('#aboutSection');
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
});
});
더 재사용 가능하게 만들고 싶다면 다음과 같이 할 것입니다.
HTML :
<div id="downButton" class="scrollme" data-goto="#aboutSection">
<i class="fa fa-angle-down"></i>
</div>
그러면 자바 스크립트는 다음과 같습니다.
$(function() {
$('.scrollme').click(function(){
scrollme(this);
});
});
function scrollme(el){
var id = $(el).data('target');
var $target = $('#' + id);
console.log($target.length)
$('html,body').animate({
scrollTop: $target.offset().top
}, 1000);
}
그런 다음 스크롤 할 요소의 ID가있는 data-target 속성이있는 요소에 scrollme 클래스를 추가하면됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다