BOM Browser Object Model Window scrollBy and scrollTo Method tutorial in JavaScript

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM scrollBy scrollTo Method JavaScript</title>
</head>

<body>
    <!--JS scrollBy() :
The scrollBy() method scrolls the document by the specified number of pixels.
Syntax :
window.scrollBy(x, y)
or just:
scrollBy(x, y)

JS scrollTo() :
The scrollTo() method scrolls the document to specified coordinates.

Syntax
window.scrollTo(x, y)
    or just:
scrollTo(x, y)-->
    <h1>JavaScript : scrollTo & scrollBy</h1>
    <button onclick="scrollWindow()" style="position:fixed;background:#0000ff;color:#ffffff;">Scroll Window</button>
    <div>
        <p style="width:1000px;border:1px solid #ff0000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
            nam, velit, expedita, temporibus nulla fugit esse dicta cupiditate laboriosam incidunt quaerat rerum optio.
            Vel rem illum, itaque veritatis facilis dicta obcaecati deleniti saepe magni, aspernatur maiores sit!
            Possimus eum molestias sit vitae cumque, id debitis nesciunt modi exercitationem incidunt asperiores quod
            nobis ex, laborum eius! Explicabo id sed tenetur minus odit rem exercitationem numquam, illum non neque
            officia vero perferendis, molestiae aperiam porro quaerat pariatur deleniti nobis earum, nostrum quos! Eius
            pariatur optio harum molestiae est, beatae blanditiis dolores. Dolorum tenetur voluptates amet quidem,
            facilis nisi! Saepe eius amet ut perspiciatis minus dicta beatae laudantium? Non, possimus mollitia
            molestiae velit odit vel veniam laborum recusandae distinctio minus ullam dolores voluptatem omnis error,
            cum nisi sunt, voluptates perferendis repellat. Repellat ullam quibusdam blanditiis nam rerum voluptatem
            culpa, quae aut dolores sint laborum itaque, aliquid quod corporis minus tenetur facere voluptatibus rem
            illo magnam nesciunt ea illum. Officia doloribus perferendis odio, assumenda tempora eius nemo quod suscipit
            tenetur impedit placeat repudiandae fugiat, nihil facere? Officiis voluptas nam quasi aut officia labore,
            quia accusantium, libero voluptate eaque autem! Earum aliquid vel fuga quam ipsam cum vitae magnam fugiat
            eveniet! Dignissimos iusto tempore reprehenderit eaque deleniti modi aut nihil accusantium quae perspiciatis
            iste quaerat suscipit harum, veniam, quidem cum dolorum expedita quos neque distinctio placeat minus, libero
            eos hic! Dicta pariatur, laborum quam impedit mollitia voluptate ullam cumque hic laudantium. Incidunt
            tempore alias reprehenderit corporis voluptatibus quia, sapiente vitae quidem officia nam, in quas
            exercitationem neque debitis minima ullam pariatur laboriosam! Qui iusto recusandae possimus. Aliquam
            quisquam, nemo itaque minima eaque ad quo debitis iste quam non esse ex deserunt voluptas eligendi ipsa
            praesentium? Numquam reprehenderit doloremque eligendi ab beatae id fuga perspiciatis, et aliquid libero
            distinctio, vitae minus quod praesentium. Laudantium itaque nobis odit veritatis voluptate fuga, eius
            numquam suscipit vitae molestiae, repellendus doloremque totam facere quibusdam explicabo, perspiciatis est
            pariatur exercitationem ratione voluptas? Hic, magni ex totam maiores accusamus illo quia quod voluptas odit
            enim. Fugiat asperiores obcaecati ipsam, dolorum maxime alias corporis quam quasi! Consequuntur quasi atque
            est aperiam, fuga consectetur optio vel fugiat, voluptatem temporibus iure repellendus impedit numquam
            soluta obcaecati iste recusandae placeat tempora dolorem id facere libero a maiores dolor? Pariatur tempore,
            sapiente consectetur recusandae ad iusto suscipit ullam necessitatibus. Laboriosam, libero aut! Sequi
            voluptates architecto voluptatem quas itaque reiciendis omnis pariatur dolores minima modi tenetur ex
            necessitatibus rerum officia quod nemo at recusandae eveniet, quasi tempora, doloremque placeat.
            Consequuntur ea nemo repellat, magnam ipsum totam, harum facere numquam quidem temporibus voluptas amet
            dolores pariatur distinctio explicabo adipisci ipsam et tempore quae magni mollitia odio est repudiandae.
            Iste voluptatibus aperiam possimus officia dolorem praesentium id nihil sequi quia, quidem quod dolorum quis
            quaerat, hic quo, quam voluptatum placeat natus. Incidunt consequatur voluptas cum consequuntur. Aperiam
            ullam quam maxime libero laborum officia numquam dicta! Tempora iusto, eos praesentium ea eveniet, atque cum
            aperiam dicta quaerat obcaecati perspiciatis odit eius delectus dolorem, odio blanditiis aliquam est
            temporibus veritatis et? Atque consequatur rerum, hic impedit reiciendis assumenda quam excepturi maxime
            itaque! Blanditiis natus accusantium architecto vel esse illo iure eius, iusto aliquam beatae omnis harum
            tempore, reprehenderit voluptatem, commodi cupiditate aperiam nisi accusamus repellendus nostrum repudiandae
            maxime delectus! Voluptatum in animi officiis illum quod eveniet libero delectus! Quibusdam voluptas quam,
            enim quas laborum, quidem cum blanditiis sunt nam officia in nulla illo perspiciatis molestias ipsum labore
            nihil veniam animi quis dicta culpa totam. Adipisci sit praesentium maiores excepturi fuga fugiat blanditiis
            alias sed corrupti est cum quas fugit numquam quia accusantium nulla, officiis sunt saepe ducimus
            doloremque. Consequatur ratione doloremque delectus dolorem esse recusandae qui soluta nesciunt atque
            blanditiis dolorum quis, explicabo, animi, omnis porro sed dolore ex aliquid suscipit dolores ipsa
            accusantium. Autem quam, ducimus dolorem maiores asperiores veritatis. Quibusdam itaque consequatur nam
            fugit, totam earum enim! Deserunt saepe hic asperiores recusandae. Nihil qui, explicabo perferendis expedita
            sapiente cumque obcaecati officiis adipisci ullam velit blanditiis nostrum excepturi quisquam voluptatum
            impedit odio ad inventore repudiandae laborum facere quidem dolores. At accusamus nisi molestiae voluptatem
            magni delectus cumque cum! Quaerat sed perspiciatis labore repellat dolor quidem, ipsa quas laboriosam
            assumenda esse neque ut officia animi voluptas dignissimos quasi doloremque inventore, cumque ullam.</p>
    </div>
    <button onclick="scrollWindowTwo()"
        style="position:fixed; left:50px; bottom:50px;background:#ff0000;color:#ffffff;">Scroll Window</button>
    <button onclick="scrollWindowThree()"
        style="position:fixed; left: 100px; bottom:100px; background:#0000ff;color:#ffffff;">Scroll Left-Right</button>
    <button onclick="scrollWindowFour()"
        style="position:fixed; left:220px; bottom:100px;background:#a52a2a;color:#ffffff;">Scroll Right-Left</button>
    <button onclick="scrollWindowFive()"
        style="position:fixed; left:350px; bottom:100px;background:#ffa500;color:#ffffff;">ScrollTo Up-Down</button>
    <button onclick="scrollWindowSix()"
        style="position:fixed; left:350px; bottom:30px; background:#a52a2a;color:#ffffff;">ScrollTo Left-Right</button>
    <button onclick="scrollWindowSeven()"
        style="position:fixed; left:350px; bottom:10px; background:#0000ff;color:#ffffff;">ScrollTo Up-Down</button>
    <script>
        // scrollBy() function works Relative position
        function scrollWindow() {
            window.scrollBy(0, 40);
        }
        function scrollWindowTwo() {
            window.scrollBy(0, -40);
        }
        function scrollWindowThree() {
            window.scrollBy(100, 0);
        }
        function scrollWindowFour() {
            window.scrollBy(-100, 0);
        }
        // scrollTo() function works Absolute, fixed position
        function scrollWindowFive() {
            window.scrollTo(0, 0);
        }
        function scrollWindowSix() {
            window.scrollTo(50, 0);
        }
        function scrollWindowSeven() {
            window.scrollTo(0, -50);
        }
    </script>
</body>

</html>



Comments

Post a Comment

Popular posts from this blog

Generators tutorial in Advance JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Generators Advance JavaScript </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < script >         //Example 1 :         // function* generateit() {         //     console.log("First Message");         //     yield "Yield No. 1"; //Here Statement will be Pause, To remove the Pause we have to call next() method again as shown below         //     console.log("Second Message");         //     yield "Yield No. ...
Read more

Document Object Module DOM querySelector and querySelectorAll tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > DOM querySelector querySelectorAll JavaScript </ title >     < link rel = "stylesheet" href = "css/main.css" > </ head > < body >     < div id = "wrapper" >         < div id = "header" class = "abc" style = " border:1px solid #ff0000;" onClick = "xyz()" >             < h1 > Hello World </ h1 >             < h1 > Welcome </ h1 >         </ div >         < div id = "menu" >             < ul >...
Read more

Find Even and Odd Numbers with Loops tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Even Odd Numbers with Loops </ title >     < script >         for ( var a = 1 ; a <= 10 ; a ++) {             if ( a % 2 == 0 ) {                 document . write ( "Even Number : " + a + "<br>" );             }         }         for ( var b = 1 ; b <= 10 ; b ++) {             if ( b % 2 != 0 ) {                 document . write ( "Odd Number : " + b + "<br>"...
Read more