Jquery scrollTop goes to the wrong position - javascript

Inside a div with scroll, when I press the button CLICK ME, the script below should scroll to the text "SHOULD GO HERE". Something similar to an anchor link.
JsFiddle: https://jsfiddle.net/hhqnjojr/2/
Instead, the script scrolls to a random position (?) way above the text "SHOULD GO HERE". Please, what am I doing wrong?
$("#my_button").click(function() {
$('#wrapper_div').animate({
scrollTop: $("#go_here").offset().top
}, 2000);
});

position: relative on the #wrapper_div seems to work. of course it doesn't scroll anywhere if you are already at the bottom. And use position() instead of offset() i believe.

$window.scrollTo(0, 0);
Write this in your click event ,this will move to top, give the position according to your requirement.

Related

Scrolltop not going to the correct position

I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.

Want to scroll a DIV element, not entire webpage

Long story short, I need to figure out a quick way to scroll a div element from the JavaScript console in Google Chrome. Here is a picture of the element that I am trying to scroll:
http://i1250.photobucket.com/albums/hh527/dr4g1116/Capture_zps63402209.png
And here is the HTML where the DIV item is that I need to scroll (highlighted at the top):
http://i1250.photobucket.com/albums/hh527/dr4g1116/Capture1_zps04c66647.png
Here's what I've tried so far:
First:
<NestedList_trends_trends_variable_selector_variable_selector_variable.scrollTo>(0,250)
Next:
NestedList_trends_trends_variable_selector_variable_selector_variable.scrollTo(0,250)
Finally:
$('body').animate({ scrollTop: $('#NestedList_trends_trends_variable_selector_variable_selector_variable').offset().top}, 5000)
This last one just scrolled the entire page. Not sure why as I referred to the correct DIV ID.
I've tried tweaking any of these three methods, but to no avail. I've run out of ideas and nothing I find on the web has helped me. Anyone have any ideas on how I can scroll this element? Please let me know!
Thanks and cheers!!
UPDATE:
Tried this to no avail:
$('#NestedList_trends_trends_variable_selector_variable_selector_variable').animate({ scrollTop: $('#Button_86').offset().top}, 5000)
You are animating the body element. You need to animate the target div. Also, I would consider either shortening the ID on that element to make it more manageable or target the element using one of the classes. Either way, try using the code in that last snippet but put the nested list inside of the first selector and the child element to which you want to scroll in the scrollTop attribute's selector.
It looks like you have jQuery so this should do:
$("#NestedList_trends_trends_variable_selector_variable_selector_variable").scrollTop(250);
or to make my brain stop hurting:
//somewhere at top of file or in a bloody config somewhere
var bigAssIdDiv = $("#NestedList_trends_trends_variable_selector_variable_selector_variable");
...
///later
bigAssIdDiv.scrollTop(250);
Note that with scrollTop the number you provide is the number of pixels "hidden" above the top (similar to scrolling down by that number of pixels...)

Assessing the screen position of an anchor?

Sorry, I'm new to javascript, and I'm stumped with this problem.
I have a div in fixed position at the top of my page.
In it are links that when you click, the page scrolls to an anchor. (I used jquery for this.)
I also used javascript to make the "back to top" button appear whenever someone click any of these links, and disappear when they click the "back to top" button itself.
...But it occurs to me that sometimes people will just use the scroll bar instead of the buttons.
Is there a way to make the "back to top" button appear when users scroll down using the scroll bar, and disappear when they scroll back to the top?
In other words, is there an attribute that I can use to assess what anchor is currently at the top of the page? (If so, I can probably figure out the solution from there...)
...Or maybe there is some way to know when users have scrolled back to the top so I can use javascript to get rid of the "back to top" button?
Any help appreciated! Thanks!!
You can get the scroll position with
var scrollTop = $(window).scrollTop();
http://docs.jquery.com/CSS/scrollTop
There are some more hints here: How do I determine height and scrolling position of window in jQuery?
You can use the scrollTop() function in jQuery to determine scrolling distance.
F.ex:
$(window).scroll(function() {
$('#backtotop').toggle( $(this).scrollTop() );
});
This will hide the element with backtotop as ID when the scrolled distance is 0.
If you like a non-jQuery solution, I’m pretty sure you can use the window.scrollY property:
window.onscroll = function() {
if (!window.scrollY) {
// hide it
} else {
// show it
}
};

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

DIV move up when scrolling down

I've been trying to get a DIV to move up when using the scroll on browser to move down, but I can't find a solution which works.
More specifically, for example if I fill a DIV with images, I want these images to scroll upwards when I scroll the browser window scrollbar downwards. So as you move longer down the page, the DIV moves upwards and shows more images.
Could you give me some suggestions how to receive such an effect?
Try something like this:
$(window).scroll(function(){
$("#scrollingDiv").stop().animate({ "marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");
});
I don't entirely follow what you are trying to do with the <div> content, but there is an easy way to detect page scrolling with jQuery:
$.scroll(function() {
alert('Scroll position: ' + $('html').scrollTop());
});
From there, you can position whatever you want, however you want, using this value $('html').scrollTop().
Maybe I'm misunderstanding but, are you trying to keep your DIV in a fixed position regardless of how far the user scrolls down the page?
If so there's a style for that:
position:fixed

Categories