programing

jQuery: 클릭 시 설정된 증분(픽셀 단위)을 스크롤 다운 페이지로 이동하시겠습니까?

javamemo 2023. 10. 7. 09:07
반응형

jQuery: 클릭 시 설정된 증분(픽셀 단위)을 스크롤 다운 페이지로 이동하시겠습니까?

요소를 클릭하면 페이지가 현재 위치에서 150px 아래로 스크롤되게 하려고 합니다.한 페이지를 대략 반쯤 스크롤했다고 가정해 보겠습니다.이 링크를 클릭하면 150 픽셀이 추가로 이동합니다.

jQuery로 가능한가요?

스크롤 탑과 스크롤 투 플러그인을 보고 있는데 도트가 연결되지 않는 것 같습니다.

var y = $(window).scrollTop();  //your current y position on the page
$(window).scrollTop(y+150);

확인만 하면 됩니다.

$(document).ready(function() {
    $(".scroll").click(function(event){
        $('html, body').animate({scrollTop: '+=150px'}, 800);
    });
});

요소를 클릭하면 스크롤러가 현재 위치에서 스크롤됩니다.

그리고 150px는 아래쪽으로 150px 스크롤 할 때 사용합니다.

이렇게 하면 됩니다.animate다음 링크와 같습니다.

http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery

사용하고 싶으시면scrollToplugin, 다음을 살펴봅니다.

JQuery $.scrollTo() 함수를 사용하여 창을 스크롤하는 방법

Ariel Flesler의 스크롤 To 플러그인이 정말 잘 하는 무언가를 찾고 있을 수도 있습니다.

http://demos.flesler.com/jquery/scrollTo/

새로운 사람이나 다른 사람들을 위한 순수한 js 솔루션.

var scrollAmount = 150;
var element = document.getElementById("elem");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}

충돌을 방지하는 HCD 솔루션의 업데이트 버전:

var y = $j(window).scrollTop(); 
$j("html, body").animate({ scrollTop: y + $j(window).height() }, 600);

언급URL : https://stackoverflow.com/questions/2659354/jquery-scroll-down-page-a-set-increment-in-pixels-on-click

반응형