scrollTop not working correctly with .animate - javascript

I have a Div containing overflow text that I would like to scroll through with the click of a corresponding button. It's set to scroll 100 pixels in either direction. The function works fine when I use it don't use jQuery .animate.
$(function() {
$( "#upBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()-100);
});
$( "#downBtn" ).click(function(){
$('#scroll').scrollTop($('#scroll').scrollTop()+100);
});
But once I add .animate, I can only click the button once in either direction. It won't let me scroll down past the first 100 pixels.
$("#scroll").animate({ scrollTop: "100px" });
Any suggestions? I put together a codepen.

Yes that is correct behavior!
Why?
Because that is already at 100px so it doesn't scroll further than that.
What should be done:
You can get the current scroll top position and add 100px to it. Like below:
$("#scroll").animate({ scrollTop: $("#scroll").scrollTop() + 100 });
And same goes for other way up.

Related

OnePage scroll down button

On this page:
http://www.petertoth.me/stuff/petertoth_old/www.petertoth.me/index.html
there is a scroll down button, that smoothly scrolls down to the "next page". Anyone recognizes if it's a pre-made jQuery plugin, or a modified one? I've been researching about it quite a while, found out its possible to mimic this one more or less with such approach:
var scrolled=0;
$(document).ready(function(){
$("#downClick").on("click" ,function(){
scrolled=scrolled+100;
$("html, body").animate({
scrollTop: scrolled
});
});
});
or
$('#gdb1').click(function(){
$("html, body").animate({ scrollTop: $(window).height()}, 600);
return false;});
http://jsfiddle.net/uw1hdkaf/20/
but would be more than happy to know how to properly make it with jQuery or without it!
You need to factor in, that the elements need to have an exact height of how much you want to scroll down. Check out this example: http://jsfiddle.net/uw1hdkaf/22/
p {
height: 100px;
margin: 0;
}
The paragraph tag has a set margin of 16px, so you need to remove that. Basically making each element completely 0 in everything.
If you set the height to 100px and scroll down 100px using your script, it will guaranteed scroll down to the next element, as long as you make sure the elements are exactly as tall as you set them.

jQuery/JS – scroll to next element on click (scrollable div issues)

I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.

JQuery .scrollTop() and .offset().top issue: how it work? How to solve?

I want to achieve some kind of smooth scrolling, so I made this script:
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).offset().top
}, 500);
return false;
});
The problem? When I click on the 'a' the offset.top() value changes in another weird value and toggle between them? Why does this happen and how do I resolve it?
http://jsfiddle.net/StartStep/9SDLw/2947/
I think the problem is with the scroll.top() that gets the value in another way...
jsfiddle.net/9SDLw/2950/
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).position().top
}, 500);
logit('Anchor: '+sclink+'; Offset top value: <b>'+$(sclink).offset().top+'</b>')
return false;
});
Use position instead of offset.
The reason is offset is relative to the viewport, as such it looks like you've scrolled too far, but this is because the top of your viewport area is being obscured by your layout, so offset is actually not what you want, instead, position is.
You should also add a reference to stop before calling animate to ensure if a user clicks in quick succession the behaviour is as expected (the animation queue is essentially flushed)
With that in mind your HTML also needs some work- the clickable link hasnt got closing tags for example.
Change your scrolling code to:
$('.menu').stop(true,true).animate({
scrollTop: $(sclink).position().top
}, 500);
Demo Fiddle

Move div to left on click and back to regular position on click

I have a navigation menu with a drop down on click and once the "resources" link is clicked I would like to have it moved to the left in the middle of the container div then once the viewer moves the mouse out of the resources link it goes back to it's regular position.
I tried to add these lines to my mini script//
jQuery( "#RXCLICK" ).animate({
left: "+=50"
});
but nothing happens.
Here's a fiddle.
My question is,
Why exactly doesn't the animation work?
What am I doing wrong?
Please help.
Did you want to animate the round ball instead of the menu?
You either really meant:
// You used a pound to refer to an ID instead of a class...
jQuery( ".RXCLICK" ).animate({
left: "+=50"
});
Or,
// This would move the menu, not the round ball.
jQuery( ".RXMENU" ).animate({
left: "+=50"
});

Scroll textarea upwards/downwards on clicking prev and next hyperlinks in web page

I want to show a hyperlinks "prev" "next".
Clicking on "next hyperlink should scroll textarea to next location.
Clicking on "prev" hyperlink should scroll textarea to previous location.
The locations to jump in textarea are known e.g. line: 10, then line 40 , 50 , 70 , 101 , ....
textarea has a fixed height.
You can use pagination.
I prefer using styled pagination with jquery-
http://flaviusmatis.github.com/simplePagination.js/#page-20
This will help you sure.
As per need you want to go next, you need to give position for your current text-block or you can use margin property.
Try this out :- http://jsfiddle.net/MCK8g/
$(function(){
$("#prev").on("click",function(){
$("html, body").animate({ scrollTop: -500 + window.pageYOffset }, 600);
});
$("#next").on("click",function(){
$("html, body").animate({ scrollTop: 500 + window.pageYOffset }, 600);
});
});
Change the factor "500" depending upon the required scroll.
Googled, first hit..
function scrollToLine($textarea, lineNumber) {
var lineHeight = parseInt($textarea.css('line-height'));
$textarea.scrollTop(lineNumber * lineHeight);
}
https://makandracards.com/makandra/8247-scroll-a-textarea-to-a-given-line-with-jquery
(the solution is using jQuery)
as mentioned their it only works if the line-height is set in pixels,
if not, a link with a workaround is also given in the post, see
jQuery: scroll textarea to given position

Categories