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 in Web Development by gaurav
• 17,580 points
189 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 in Web Development by rajatha
• 7,040 points
8 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 in Web Development by rajatha
• 7,040 points
21 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

4 days ago in Web Development by gaurav
• 17,580 points
8 views
0 votes
1 answer

Adding a page loader using jQuery

“html loader using jquery” Code Answer $('body'). append('<div ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
17 views
0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
22 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
21 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 in JQuery by rajatha
• 7,040 points
10 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 in Web Development by rajatha
• 7,040 points
9 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 in Web Development by gaurav
• 17,580 points
14 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 in Web Development by gaurav
• 17,580 points
32 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP