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
}
};
Related
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.
I've been racking my brain and my Google Fu for a few hours now trying to find a solution to this one, but can't seem to come up with anything satisfactory.
I want to affix an element to the side of the page for some search criteria, much like Bootstrap's "Affix" plugin. (Demo Here). The problem is that it's going to be very common that the element is much taller than the window. So there will be scrolling of the element itself involved.
Usually this wouldn't be a problem because as the user hits the top + bottom of the document they would be able to see the top and bottom of the fixed element. (See bootstrap example while shrinking you're window very short). But we're planning on using infinite scroll on our results set, meaning there won't be a bottom to hit, and therefore they'll never see the bottom of the fixed element. As the user scrolls down, it needs to be bottom fixed so the user sees all criteria, then on the way up, it needs to be top fixed.
So I started off by modifying Bootstrap's plugin (I'm not actually using bootstrap). Now scrolling down the page is easy, using a fixed point on the bottom of the element means that it's not affixed until you reach the bottom of it.
But scrolling back up again is where I'm hitting issues.
Am I missing something really obvious and easy here (it is Monday morning after all), or does anyone know of a plugin / patch to bootstraps affix.
TL;DR
Need to affix a very tall element to the page and allow it to scroll. So it's fixed on the way down, then as they scroll back up, the element isn't fixed so it's also being scrolled up. Once the top of the element is hit, fix it there.
Is this what you Want to do DEMO
Simple jQuery function that will help.
$(function()
{
affix= $(".affix-top");
var affixHeight = parseInt(affix.height());
var affixTop = parseInt(affix.offset().top);
var affixBottom = parseInt(affixTop + affixHeight);
// Bind a scroll event for the whole page
$(document).bind("scroll", function(e)
{
// Calculate how far down the user has scrolled
var screenBottom = parseInt($(window).height() +$(window).scrollTop() );
// Test if the div has been revealed
if(screenBottom > affixBottom)
{
affix.attr("style","");
affix.css({"bottom":"0px","position":"fixed"});
}
else
{
affix.attr("style","");
affix.css({"top":"0px","position":"relative"});
}
});
});
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/
I have a simple image gallery here. All I want to do is to scroll through the list of images when the user scrolls his mouse.
Any ideas ? $('').scroll() definitely doen't work. Even if i bind it to the window by
$(window).scroll(function() {
//do something
});
It doen't work , because my window has too less height to be scrollable.
This is not jQuery, but there is a pure JS plugin to capture the mouse scroll event:
http://viralpatel.net/blogs/javascript-mouse-scroll-event-down-example/
demo:
http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html
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