scrollTop and scrollLeft Method in jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>scrollTop and scrollLeft Method</title>
<style>
#box {
width: 230px;
height: 80px;
background: lightgreen;
padding: 10px;
border: 1px solid #000;
position: fixed;
left: 20px;
bottom: 30px;
}
</style>
</head>
<body style="width:600px">
<h1>jQuery scrollTop and scrollLeft Method</h1>
<button id="scrolltopBtn">scrollTop</button>
<button id="scrollleftBtn">scrollLeft</button>
<br><br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates, ullam libero! Molestias ducimus dolor aliquid
sint possimus aliquam inventore ab recusandae sapiente officiis quas vel totam ratione voluptate, nulla voluptatem
deleniti sit itaque delectus accusamus dolores expedita doloribus? Voluptatibus dolores aspernatur nesciunt debitis
atque consequatur quasi ea beatae asperiores earum velit quis ex architecto excepturi delectus ipsam odit sequi
rerum error eius hic, expedita commodi nulla! Non asperiores aperiam repellendus suscipit natus illum optio
perspiciatis quam explicabo soluta dolore at facere libero vitae et quis quibusdam reiciendis, sunt nobis eius
mollitia neque! Et temporibus consequatur commodi voluptate, aliquam mollitia aperiam hic quod, modi consectetur
repellat debitis voluptatibus ex? Sequi repellat officiis dicta hic voluptate. Harum reiciendis doloremque vero
temporibus nesciunt architecto tenetur ipsum rerum molestias quibusdam similique voluptatem eius inventore, quia sed
provident quae vel at rem magni magnam. Veniam, neque. Mollitia officiis in perferendis, quod iure tenetur, deleniti
tempore dolore consequuntur obcaecati doloremque culpa atque facere quidem. Error, doloribus alias eum cum quis
voluptatibus repellat ipsam corporis maiores, delectus ipsa impedit quo nisi esse, dolores deserunt! Odit illum
ducimus voluptates officia! Sint animi doloribus porro veniam, explicabo fuga, dolor aliquid nesciunt ea, at
voluptatem aperiam. Sit dignissimos facere, totam facilis tempora quam modi debitis? Ea deserunt, commodi veritatis
quibusdam aperiam dignissimos maxime tenetur odit? Excepturi nulla accusamus quae voluptatibus sunt consequuntur,
dicta id error ipsam dolores iste quod repellat commodi asperiores quisquam cupiditate adipisci corporis tenetur,
ipsa beatae, libero totam qui blanditiis. Repellendus omnis perferendis cupiditate accusamus consequatur adipisci
quis impedit, sit totam placeat nobis, sunt nulla distinctio eum veritatis necessitatibus tenetur, minus maiores
laudantium. Quisquam velit molestias cumque nam facilis beatae laboriosam. Suscipit, molestias adipisci!
Repudiandae, libero, saepe fugit, illum assumenda in reprehenderit facilis labore quia amet debitis enim fuga
aliquid quae rerum excepturi iure dolorum ut! Ullam, maiores facere culpa cupiditate accusantium tempore sint, illum
dolore perferendis illo, voluptates ipsam at ipsa libero. Dolores excepturi, doloribus ad nulla numquam sapiente
cupiditate culpa corrupti vel saepe veniam nobis maxime molestiae natus nostrum alias, at assumenda velit aut!
Voluptate porro minima soluta, suscipit sint possimus dolore repellat! Eos voluptatibus voluptates deleniti
blanditiis veritatis, soluta voluptate incidunt perspiciatis atque, officiis architecto! Odit, tenetur inventore
numquam nam enim fuga minima odio est iusto molestias mollitia non blanditiis culpa, dolores quos, at id dolore. Et
voluptate ducimus qui reiciendis, dignissimos, ullam in voluptatibus nostrum voluptatum cupiditate odio doloremque
sunt laudantium nam explicabo dolor sequi quam. Nobis placeat possimus modi vitae sequi repellendus. Perferendis
reiciendis vitae voluptatum minus. Sed sequi voluptatum aut repellendus, earum animi, eligendi incidunt saepe dicta
dolorem similique exercitationem suscipit non provident inventore iste laboriosam ad cum quae. Quo unde sunt nemo
neque, iusto, laboriosam dolor magni dolorum non delectus placeat dicta ullam, doloribus cum aperiam obcaecati! Unde
quasi culpa voluptates iste maxime accusamus sit rerum commodi quibusdam perferendis cumque autem numquam itaque,
aperiam, quo harum! Praesentium sed repellat porro veniam corporis, architecto recusandae qui itaque laborum
pariatur nemo corrupti natus vitae sapiente neque eligendi molestiae fuga facere. Dolore, quo.
<div id="box"></div>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
$("#box").html("");
$("#box").append("Top : " + $(window).scrollTop());
$("#box").append("<br>Left : " + $(window).scrollLeft());
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
});
$("#scrolltopBtn").click(function () {
$(window).scrollTop(200);
});
$("#scrollleftBtn").click(function () {
$(window).scrollLeft(100);
});
});
</script>
</body>
</html>
.png)
Comments
Post a Comment