jQuery scroll .scrollTop() .scrollLeft()

website creator jQuery .scrollTop() gets or sets the vertical position of the scroll bar for the target element;

jQuery .scrollLeft() gets or sets the horizontal position of the scroll bar for the target element;

Also check jQuery scroll event;

js:

<script>

$(function(){

    $('.scroll-down').click(function() { // bind an event handler to the click event

        //$('.scroll-parent').scrollTop( $('.scroll-parent').scrollTop() + 100 ); // fast scroll

        $('.scroll-parent').animate({ // smooth scroll

            scrollTop: $('.scroll-parent').scrollTop() + 100

        })

        $('.log .top').text( $('.scroll-parent').scrollTop() );

    });

    

    $('.scroll-up').click(function() { // bind an event handler to the click event

        //$('.scroll-parent').scrollTop( $('.scroll-parent').scrollTop() - 100 ); // fast scroll

        $('.scroll-parent').animate({ // smooth scroll

            scrollTop: $('.scroll-parent').scrollTop() - 100

        })

        $('.log .top').text( $('.scroll-parent').scrollTop() );

    });

    

    $('.scroll-right').click(function() { // bind an event handler to the click event

        //$('.scroll-parent').scrollLeft( $('.scroll-parent').scrollLeft() + 100 ); // fast scroll

        $('.scroll-parent').animate({ // smooth scroll

            scrollLeft: $('.scroll-parent').scrollLeft() + 100

        })

        $('.log .left').text( $('.scroll-parent').scrollLeft() );

    });

    

    $('.scroll-left').click(function() { // bind an event handler to the click event

        //$('.scroll-parent').scrollLeft( $('.scroll-parent').scrollLeft() - 100 ); // fast scroll

        $('.scroll-parent').animate({ // smooth scroll

            scrollLeft: $('.scroll-parent').scrollLeft() - 100

        })

        $('.log .left').text( $('.scroll-parent').scrollLeft() );

    });

    setInterval(function(){

        if($('.hover-scroll-down').is(':hover')) {

            $('.scroll-parent').animate({ // smooth scroll

                scrollTop: $('.scroll-parent').scrollTop() + 100

            })

            $('.log .top').text( $('.scroll-parent').scrollTop() );

        }

    }, 600);

});​

</script>

html:

<div class="btn-toolbar">

    <button class="btn btn-primary scroll-down"><i class="icon-arrow-down"></i> scroll-down</button>

    <button class="btn btn-primary scroll-up"><i class="icon-arrow-up"></i> scroll-up</button>

    <button class="btn btn-primary scroll-right"><i class="icon-arrow-right"></i> scroll-right</button>

    <button class="btn btn-primary scroll-left"><i class="icon-arrow-left"></i> scroll-left</button>

    <button class="btn btn-primary hover-scroll-down"><i class="icon-arrow-down"></i><i class="icon-arrow-down"></i> hover scroll-down</button>

</div>

<div class="log">scroll position: top=<span class="top">0</span> left=<span class="left">0</span></div>

<div class="scroll-parent well">

    <div class="scroll-child well">

        <img src="https://via.placeholder.com/200x80" />

The quick brown fox jumps over the lazy dog.

Brick quiz whangs jumpy veldt fox!

Quick wafting zephyrs vex bold Jim.

Sphinx of black quartz judge my vow!

The five boxing wizards jump quickly.

Mr. Jock, TV quiz Ph.D., bags few lynx.

Pack my box with five dozen liquor jugs.

Jackdaws love my sphinx of black quartz.

Sympathizing would fix Quaker objectives.

Five big quacking zephyrs jolt my wax bed.

The quick brown fox jumps over the lazy dog.

Many-wived Jack laughs at probes of sex quiz.

Mix Zapf with Veljovic and get quirky Beziers.

Dumpy kibitzer jingles as exchequer overflows.

Puzzled women bequeath jerks very exotic gifts.

Brawny gods just flocked up to quiz and vex him.

Viewing quizzical abstracts mixed up hefty jocks.

Playing jazz vibe chords quickly excites my wife.

Jim just quit and packed extra bags for Liz Owen.

Five wine experts jokingly quizzed sample chablis.

William Jex quickly caught five dozen Republicans.

A large fawn jumped quickly over white zinc boxes.

Cozy lummox gives smart squid who asks for job pen.

Turgid saxophones blew over Mick?s jazzy quiff.

Big July earthquakes confound zany experimental vow.

Exquisite farm wench gives body jolt to prize stinker.

Six big devils from Japan quickly forgot how to waltz.

The vixen jumped quickly on her foe barking with zeal.

Five or six big jet planes zoomed quickly by the tower.

Crazy Fredericka bought many very exquisite opal jewels.

My grandfather picks up quartz and valuable onyx jewels.

Six crazy kings vowed to abolish my quite pitiful jousts.

Sixty zippers were quickly picked from the woven jute bag.

The job of waxing linoleum frequently peeves chintzy kids.

Jack amazed a few girls by dropping the antique onyx vase!

How razorback-jumping frogs can level six piqued gymnasts!

We have just quoted on nine dozen boxes of gray lamp wicks.

May Jo equal the fine record by solving six puzzles a week?

West quickly gave Bert handsome prizes for six juicy plums.

Jay visited back home and gazed upon a brown fox and quail.

Fred specialized in the job of making very quaint wax toys.

Just keep examining every low bid quoted for zinc etchings.

Freight to me sixty dozen quart jars and twelve black pans.

Verily the dark ex-Jew quit Zionism, preferring the cabala.

A quick movement of the enemy will jeopardize six gunboats.

Jeb quickly drove a few extra miles on the glazed pavement.

All questions asked by five watch experts amazed the judge.

Grumpy wizards make toxic brew for the evil Queen and Jack.

The exodus of jazzy pigeons is craved by squeamish walkers.

We promptly judged antique ivory buckles for the next prize.

Back in June we delivered oxygen equipment of the same size.

Lazy movers quit hard-packing of papier-mâché jewelry boxes.

While waxing parquet decks, Suez sailors vomit jauntily abaft.

How vexing a fumble, to drop a jolly zucchini in the quicksand!

Astronaut Quincy B. Zack defies gravity with six jet fuel pumps.

My help squeezed back in again and joined the weavers after six.

New farm hand (picking just six quinces) proves strong but lazy.

Alfredo just must bring very exciting news to the plaza quickly.

Back in my quaint garden jaunty zinnias vie with flaunting phlox.

Jaded zombies acted quaintly but kept driving their oxen forward.

Hark! Toxic jungle water vipers quietly drop on zebras for meals!

Six jabbering pacifist vultures were ambushed by the zany quagmire.

Six big juicy steaks sizzled in a pan as five workmen left the quarry.

Will Major Douglas be expected to take this true-false quiz very soon?

The juke box music puzzled a gentle visitor from a quaint valley town.

Just work for improved basic techniques to maximize your typing skill.

A mad boxer shot a quick, gloved jab to the jaw of his dizzy opponent.

Verbatim reports were quickly given by Jim Fox to his amazed audience.

When we go back to Juarez, Mexico, do we fly over picturesque Arizona?

Questions of a zealous nature have become by degrees petty waxen jokes.

About sixty codfish eggs will make a quarter pound of very fizzy jelly.

Murky haze enveloped a city as jarring quakes broke fourty-six windows.

King Alexander was just partly overcome after quizzing Diogenes in his tub.

The July sun caused a fragment of black pine wax to ooze on the velvet quilt.

Two hardy boxing kangaroos jet from Sydney to Zanzibar on quicksilver pinions.

Perhaps President Clinton?s amazing sax skills will be judged quite favorably.

Was there a quorum of able whizzkids gravely exciting the jaded fish at ATypI?

Ebenezer unexpectedly bagged two tranquil aardvarks with his jiffy vacuum cleaner.

Fabled reader with jaded, roving eye seized by quickened impulse to expand budget.

For only $49, jolly housewives made “inexpensive” meals using quick-frozen vegetables.

The sex life of the woodchuck is a provocative question for most vertebrate zoology majors.

Breezily jangling $3,416,857,209 wise advertiser ambles to the bank, his exchequer amplified.

Jimmy and Zack, the police explained, were last seen diving into a field of buttered quahogs.

Typography is known for two-dimensional architecture and requires extra zeal within every job.

William said that everything about his jacket was in quite good condition except for the zipper.

The vegetarian menu included gazpacho, piquant julienne beets, rusk rounds with yogurt, and excellent flan.

Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.

No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct.

Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze.

An inspired calligrapher can create pages of beauty using stick ink, quill, brush, pick-axe, buzz saw, or even strawberry jam.

    </div>

</div>

​​