scroll up and down a div on button click using jquery

0 votes

I am trying to add a feature to scroll up and down a div based on button click. I was able to do the scroll down part easily, but got stuck wit the scroll up part and one more concern was a scenario, which I will explain,

Click on "Go Down" button.

and if I manually scroll down dragging down the scroll bar.

and now if I click on Go Down button again, the scroll bar will go to the previous position, as the variable assigned with the value for scrolling has an old value insteading of detecting current position of scroler.. I will add a jsfiddle link to show my work and also paste the code. What could I be doing wrong wit the scroll up option too!!

http://jsfiddle.net/xEFq5/7/

var scrolled=0;

$(document).ready(function(){


$("#downClick").on("click" ,function(){
    scrolled=scrolled+300;

    $(".cover").animate({
        scrollTop:  scrolled
    });

});


$("#upClick").on("click" ,function(){
    scrolled=scrolled-300;

    $(".cover").animate({
        scrollBottom:  scrolled
    });

});


$(".clearValue").on("click" ,function(){
    scrolled=0;
});


});


<div class='header'><button id='upClick'>Go Up</button> <button id='downClick'>Go Down</button><button class='clearValue'>Clear Value</button> </div>


 <div class='cover'><div class='rightSection'></div></div>

also is there a good plugin which has this functionality??

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
8,069 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

how to rotate image image 3d in jquery on swipe up and swipe down

If you're not using one of the ...READ MORE

answered Aug 4, 2022 in Web Development by rajatha
• 7,680 points
1,897 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
514 views
0 votes
0 answers

jQuery Count Down timer based on Remaining Days, Hours, Minutes and Seconds

I'm creating a system where I have ...READ MORE

Aug 11, 2022 in Web Development by gaurav
• 23,260 points
1,825 views
0 votes
0 answers

Getting the Text of a Check Box and Text Area To Display using jQuery

What I am trying to do is ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
1,838 views
0 votes
0 answers

Using jQuery to countdown from 90 seconds beginning on the click of an element

Hi I was wondering if anyone can ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
514 views
0 votes
0 answers

How to stretch a GIF to fill the whole div using jQuery Mobile?

I'm using jQuery Mobile to create a ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
782 views
0 votes
1 answer

Smooth scrolling when clicking an anchor link

document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,680 points
2,172 views
0 votes
1 answer

Smooth scroll to div id jQuery

You need to animate the html, body $("#button").click(function() { ...READ MORE

answered Jun 23, 2022 in Web Development by rajatha
• 7,680 points
3,187 views
0 votes
0 answers

Scroll to an element with jQuery

I have this input element: <input type="text" class="textfield" ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
490 views
0 votes
0 answers

How to scroll to top of page with JavaScript/jQuery?

Is there a way to control browser ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
2,238 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP