I'm creating a split page with a menu on the left, and the main content on the right. When I click on a menu item, I want to scroll the main content to that item.
I found JavaScript scrollTo(), which takes offset arguments.
Is there any way to determine the offset of a particular <p> or other element within a <div>? Or perhaps there is another way to scroll to an element without knowing its offset?
EDIT
Thanks for the replies. Looks like everyone gave similar answers. However, I ran into a problems with this. It seems that offset().top (or position().top) return different values depending on the current scroll position.
My jsFiddle is here: http://jsfiddle.net/gBTW9/4/embedded/result/
If I scroll to the top and selection Section 4, it works as expected. But once I've scrolled, it stops working correctly. Can anyone see what is happening.
There are jquery methods offset and position stat can help there.
Also there is good scrollTo plugin which accepts elements and much more.
You can get the vertical offset of an element using $('p').offset().top. You can combine this with scrollTop() using this:
$('div').scrollTop($('p').offset().top);
You need to use position() rather than offset(). If you know the id of that you can easily find the position of that paragraph tag
jQuery: Difference between position() and offset()
If i didn't misunderstood you just need an animated scrolling to a particular element, something similar on what I did on my portfolio.
Assuming that the menu on the left is fixed, then just scroll the page to the element you want to scroll to:
$("html, body").animate({
scrollTop: $('#element').offset().top
});
If you need to move a particular element over another element then:
$("#element1").animate({
top: $('#element2').offset().top
});
Why try it the hard way, when you can use a HTML native attribute??
call me old school, but i like to keep it simple.
within your menu:
use:
<ul>
<li>
Paragraph 1
</li>
</ul>
instead of
<ul>
<li>Paragraph 1</li>
</ul>
this will make your section jump to the # (id) that equals Paragraph1
Related
I'm trying to make a div element with certain content move (Jump) between an specific area that has some duplicates inside an article while scrolling.
The div #hotswapdiv should be inserted inside each <div id="div_identifier">
</div> while scrolling the page, by moving from the previous #div_identifier to the next #div_identifier.
It's like teleporting the #hotswapdiv between the elements with the same ID while scrolling.
JSFIDDLE:
https://jsfiddle.net/2n8k8g4L/7/
But for some reason it's not working.
Reference: https://api.jquery.com/detach/
Any ideas?
you can only use one #div_identifier because it is an id ,
i think class="div_identifier" and .div_identifier will fix your issue
I'm having a problem implementing relatively complicated auto-scroll functionality on my page. This displays the issue in my code...
http://codepen.io/d3wannabe/pen/XXxdQq
I have multiple divs on my page (blue,red,green in my example) that I not only want to be able to scroll to (which the top 3 buttons in my example achieve perfectly), but I want to be able to scroll WITHIN (which the bottom 3 buttons represent my best attempt at).
The thing I can't figure out, is why the scroll within function works well on my first div ("scrollTo3rdBlueItem" button), but then less accurately with the other divs ("scrollTo3rdRedItem" and "scrollTo3rdGreenItem" buttons). In my full web application (which obviously has more data to scroll through), I basically see that the lower down the page the parent div is positioned, the less accurately I'm able to scroll within it.
I'm struggling to identify much of a pattern though so can't simply try tweaking the offset values. Any ideas what I might be doing wrong here would be hugely appreciated!!
...since I wasn't allowed to post this without quoting code - here's the jquery function you can see in my codepen!
function scrollToParent(parentID){
$('html,body').animate({scrollTop: $('#'+parentID).offset().top}, 500);
}
function scrollToChild(parentID, childID){
//first focus on the parent
scrollToParent(parentID);
$('#'+parentID).animate(
{scrollTop: $('#'+ childID).offset().top - 100}
, 500);
}
UPDATE
Answer here was COMPLETETLY wrong. Left here to preserve the comments.
UPDATE 2
Got IT! You need to take in to account the offset of the parent div. Update your scrollToChild function to the below;
$('#'+parentID).animate(
{
scrollTop: $('#'+ childID).offset().top - $('#'+parentID).offset().top
}, 500);
My problem is that after scrolling in the #leftnav the #leftnavHover does not position itself according to the new top css value. I need the #leftnavHover div to follow in the same way the native title text for the browser does.
Here's a fiddle http://jsfiddle.net/fauverism/b4rwb/6/
Here's a step by step of what I'm describing...
Visit the link and hover over Sabers in the nav
Scroll inside the nav div
Hover over Sabers again and you'll notice that the placement of the Sabers text inside of the #leftnavHover is in the same place. The div placement does not insert the new topAfterScroll array. The array is only present once and it then gets removed with the original value.
Here are some details...
I can't seem to store the array that is retrieved after the scroll from topAfterScroll into a new var
This only has to work in Chrome :)
Yes I know that this does seem strange to do since browsers handle this functionality just fine. It's a Chromium issue.
Just subtract the scrolled pixels using jQuerys scrollTop (API) on #leftnav like this:
$('#leftnavHover').text(this.title).css('top', this.offsetTop - $('#leftnav').scrollTop());
http://jsfiddle.net/b4rwb/7/
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...)
I have a set of LI elements with overflow propety set to hidden by the
jCarouselLite plugin. What I would like to do
is to scroll the jCarouselLite'd element in order to scroll to the
LI element I want, since I have it configured to
show only 3 elements.
Looking at the html code generated by the plugin, I can see:
<ul ..>
<li ..style="..overflow:hidden">1</li>
<li ..style="..overflow:hidden">2</li>
<li ..style="..overflow:hidden">3</li>
<li ..style="..overflow:hidden">4</li>
</ul>
So, I have the first 3 LI elements shown by the plugin, but not the last one. What I would like to do is to scroll so that the 4th LI element is shown, or I can do that by myself if I manage to check if that last LI is within the overflow area, so I can see if it's necessary to scroll for it in order to show it or not.
Hope I'm not getting things confused to understand.
If I understand you correctly, you want to check if the last li in that group has the style overflow: hidden.
You can do this with a simple selector.
$(document).ready(function(){
tester = $('li').last().css('overflow');
alert (tester);
});
That will set the last li's overflow style to the variable "tester", and when it sends the alert box it will alert the current state of overflow. So if overflow is set to hidden, it will say "hidden", if overflow is set to scroll it will say "scroll".
Sorry if I didn't understand properly or answer your question.
I couldn't find an answer for my original question, but as for any jCarouselLite plugin users, what I did in order to make the carouselLite scroll to a particular item, was to modify just the declaration of the private method go of the plugin in order to make it public, as follows:
.. code ..
go = $.fn.jCarouselLite.go = function go(to) {
if(!running) {
.. code ..
}
.. code ..
I'm sure it's not the best, and more importantly, safer solution, but for now it works for me. Just have to call
$().jCarouselLite.go(position);
on my script, considering position as a number starting from 0 (the first position on the carouselLite).