How to make to the top of the page button in javascript? - javascript

I would like to know how to make a jquery button with the function scrooling to the top of the page. This button is usually found on the bottom of the page.
Preferably, is there a module for Drupal 6.0?
Thanks in advance for any help.

$('#scroll-to-top').click(function() {
$('html, body').scrollTop(0);
});
If you want it to scroll up nicely, do this:
$('#scroll-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});

Is there a reason you need to use javascript for this? You can do it purely through html by setting an anchor at the top of the page:
<a name="top"></a>
and then wherever you want to provide a link to the top you can use a regular a tag with an href:
Top!
hope this helps.

Easiest way is to add an id to the html/body like..
<html id="top">
..and then add a link to it..
Top
While a lot of people do put it at the bottom, lately I've seen a lot of people put it fixed on the page, and and showing it when you scroll down a little, like this.

Don't use Javascript. Add a <a name="top"></a> to the top of your page, and for the clickable link use Top.
You can achieve the same thing with jQuery and scrollTop, but you shouldn't.
You also probably don't need a "Top" button. Nobody uses them, and they don't add any useful functionality to your site. There is already a "top" button on the keyboard, "Home".

Related

jquery animate/scrollTop to multiple anchors inside divs

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);

Jquery scrollTop goes to the wrong position

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.

Customize scrolling with buttons

I am trying to achieve the following look for a box that can scroll up and down:
and not the scroll bar on the side. Is this possible that when they click on the up arrow or hover over it, it scrolls up and the same for the down arrow? as well as if they use the scrolling button?
This is just a simple example, I hope it can help you.Fiddle
The only code jQuery you need is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#prev').click(function(){
$('li:last').detach().prependTo('ul').css({'margin-top':'-=100px'})
$('li:first').stop().animate({'margin-top':'0px'},1000)
})
$('#next').click(function(){
$('li:first').stop().animate({'margin-top':'-=100px'},1000,function(){
$(this).detach().css({'margin-top':'0px'}).appendTo('ul')
})
})
})
</script>
If you want to build pure css arrows visit this site: link
And your result will be fiddle
Sometimes the simplicity is the best thing..by
This question provides an jQuery Solution for Scrolling a <div> element on click.
It seems to be flexible so you can customize the scroll step for each click.
How to make a scrolable div scroll on click and mouseover using jQuery

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...)

Scrolling a <div> to Specific Content

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

Categories