cuộn lên và xuống một div khi nhấn nút bằng cách sử dụng jquery

Question

Tôi đang cố gắng thêm một đối tượng địa lý để cuộn lên và xuống một div dựa trên nút bấm. Tôi đã có thể thực hiện việc di chuyển xuống một phần dễ dàng, nhưng bị mắc kẹt với phần cuộn lên và một mối quan tâm nữa là một kịch bản, mà tôi sẽ giải thích,

Nhấp vào nút "Đi xuống".

và nếu tôi cuộn xuống bằng tay kéo xuống thanh cuộn.

và bây giờ nếu tôi nhấp vào nút Đi xuống một lần nữa, thanh cuộn sẽ chuyển đến vị trí trước đó, vì biến được gán với giá trị để cuộn có giá trị cũ thay vì phát hiện vị trí hiện tại của bộ ghi. một liên kết jsfiddle để hiển thị công việc của tôi và cũng dán mã. Những gì tôi có thể làm sai wit tùy chọn cuộn lên quá !!

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> 

cũng có một plugin tốt có chức năng này ??

Answer 1

scrollBottom không phải là một phương pháp trong jQuery.

CẬP NHẬT DEMO - http://jsfiddle.net/xEFq5/10/

Hãy thử điều này:

$("#upClick").on("click" ,function(){ 
    scrolled=scrolled-300; 
     $(".cover").animate({ 
      scrollTop: scrolled 
    }); 
    }); 

Answer 2

Đối với đi lên, bạn chỉ cần sử dụng scrollTop thay vì scrollBottom:

$("#upClick").on("click", function() { 
    scrolled = scrolled - 300; 
    $(".cover").stop().animate({ 
     scrollTop: scrolled 
    }); 
}); 

Ngoài ra, sử dụng các phương pháp để .stop()dừng các hình ảnh động hiện chạy trên cover div. Khi .stop() được gọi trên một phần tử, hoạt ảnh hiện đang chạy (nếu có) bị dừng ngay lập tức.

FIDDLE DEMO

Answer 3

đâu nó đến từ scrollBottom đây không phải là một tài sản có giá trị nó phải được scrollTop và điều này có thể là tích cực (+) hay tiêu cực (-) để cuộn xuống (+) và lên (-), vì vậy bạn có thể thay đổi:

scrollBottom 

này scrollTop:

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

    $(".cover").animate({ 
     scrollTop: scrolled 
    });//^^^^^^^^------------------------------this one 
}); 

Answer 4

Để giải quyết vấn đề khác của bạn, nơi bạn cần phải thiết lập scrolled nếu người dùng cuộn bằng tay, bạn phải đính kèm một handler cho sự kiện cửa sổ cuộn. Nói chung đây là một ý tưởng tồi như xử lý sẽ cháy rất nhiều, một kỹ thuật phổ biến là để thiết lập một thời gian chờ, như vậy:

var timer = 0; 
$(window).scroll(function() { 
    if (timer) { 
    clearTimeout(timer); 
    } 
    timer = setTimeout(function() { 
    scrolled = $(window).scrollTop(); 
    }, 250); 
}); 

Answer 5

cuộn div trên nhấp chuột nút.

Mã Html: -

<div id="textBody" style="height:200px; width:600px; overflow:auto;"> 
    <!------Your content----> 
</div> 

đang JQuery để di chuyển div: -

$(function() { 
    $("#upBtn").click(function(){ 
     $('#textBody').scrollTop($('#textBody').scrollTop()-20); 
}); 

$("#downBtn").click(function(){ 
    $('#textBody').scrollTop($('#textBody').scrollTop()+20);; 
}); 

}); 

Answer 6

Bạn có thể sử dụng plugin này đơn giản để thêm scrollUp và scrollDown để jQuery của bạn

https://github.com/phpust/JQueryScrollDetector

Answer 7

Chỉ cần thêm vào các dấu phẩy khác ts - nó sẽ có giá trị trong khi vô hiệu hóa cuộn lên trong khi ở đầu trang. Nếu người dùng vô tình cuộn lên trong khi đã ở phía trên họ sẽ phải di chuyển xuống hai lần để bắt đầu

if(scrolled != 0){ 
    $("#upClick").on("click" ,function(){ 
    scrolled=scrolled-300; 
     $(".cover").animate({ 
      scrollTop: scrolled 
    }); 
    }); 
}