I'm trying to make a smooth scrolling in my new website.
Look at this site: http://asher-gallery.com/
There is 3 blocks that I want to link to "a href=#(.*)" that I could make smooth scroll same like that: http://asher-gallery.com/1/.
I change the parameters and its moving to the block location but not with animate...
I hope you guys may help me with this !
THX!
Something like this should work if you wrap it in a click event
$("html, body").animate({ scrollTop: $('#element-to-scroll-to').offset().top }, 300);
CSS classes can not start with numbers, if your class is like class="1", the code is ignoring.
Related
I'm trying to have it so when the user clicks a link it scrolls down so that the blue area is off the top of the page.
This is my jsFiddle
I think the code would be something like this:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $("#jumbo").offset().bottom
}, 2000);
});
However it doesn't seem to work. Can anyone tell me where I have gone wrong please?
offset() only exposes the top and left properties. To get the bottom you need to add the height to top:
$('html, body').animate({
scrollTop: $(".jumbo").offset().top + $(".jumbo").height()
}, 2000);
Updated fiddle
Also, note that in your example jumbo is a class, not an id.
I think you're looking for scrolling to the first .midheight div:
$("#scroll").click(function() {
$('html, body').animate({
scrollTop: $(".midheight:eq(0)").offset().top
}, 2000);
});
Updated Fiddle
You don't need to use jQuery for this, you can simply use anchors.
Anchors are links but with hashes, for example:
<a name="scroll_down"></a>
These can then be targeted with a normal link, but set out like this:
Clicking the link will scroll you down the page to where the anchor is put in your HTML.
For the slow animation that you're after, you can look here and use his code. All credit to him for the code, works great.
Here is your updated fiddle
The good thing about this, is you can easily use to it have links to each of the "features" you had in the fiddle and have an anchor above each so the user can scroll down to the appropriate are easily, and without the need for you to have repeating jQuery code.
On my page I have new comment box's that stack on top each other every couple of seconds. is their a way to follow the comment box I click on. currently if i click it that box gets pushed off the screen when the other box's load on top and have to scroll down manually to it. I would like to auto follow that box I click on... Focus?
You can use an anchor:
<div id="aDiv"></div>
then
location.href = "#";
location.href = "#aDiv";
Or you can use jquery scrollTop: scrollTop: $(this).offset().top
Or you can use javascript scrollTo: window.scrollTo(elementPos,0)
So, to set the scroll, https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
I would implement this 2 ways
An observer pattern with the boxes, that knows when new boxes are added, which checks a flag. The flag itself is set true when there is focus on any comment box, and false when there is not.
Scrolltop can be jarring in a UI, but perhaps you can figure out a way to animate it, I won't spoon feed you further.
Check out Addy Osmanis book if you need help with design patterns!
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
You can use the scrolltop function in jQuery.
//Everytime, you add a comment, scroll the page to the element
$('html, body').animate({
scrollTop: $("#clickedComment").offset().top
}, 500);
Here's a complete fiddle but you will see that there is a logic problem. It's not possible to scroll up when you have many comment above.
I am using this code to scroll to a certain element on my page:
$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);
It works, but there is one issue with it: When the user scrolls down while the script scrolls up, there is some juddering because there are two scroll commands at the same time in different directions - sounds logical to me.
I checked some other sites with such scroll functionality, there is no juddering. So what's the trick to prevent this?
Thats a jQuery bug when you use animate with scrolling, good detection.
I did a research how to turn it off scrolling and find this question : How to disable scrolling temporarily?
Here is jsFiddle. You will see after click; user cant scroll untill animate complete.
$('.myDiv').click(function(){
disable_scroll();
$('html, body').stop().animate({ scrollTop: 0 }, 700,function() {
enable_scroll();
});
});
edit: thanks to galambalazs btw.
an idea - try hooking to the scroll event and use http://api.jquery.com/stop/ to stop your animation
.. bad idea..
same problem with a solution - let user scrolling stop jquery animation of scrolltop?
I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot:
here is the link : http://www.soleilnoir.net/believein/
Any ideas how to achieve the similar effect?
Thanks
This effect is called parallax.
Here are some links related to this effect:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
You could achieve that through a combination of watching the scroll offset position and then animating different elements based on that scroll position. You would set an event listener and at certain positions fire functions to animate an element onto the page.
If using jQuery, something like this:
$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() {
var scrollPos = $(window).scrollTop();
switch (scrollPos) {
case (500):
doSomething();
break;
case (1000):
doSomethingElse();
break;
}
}
function() doSomething {
// use animate to animate element(s) at 500
}
function() doSomethingElse {
// use animate to animate element(s) at 1000
}
I'm sure that could be optimized better than that, but that should be enough to get started.
I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section?
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo
You can use scrollLeft and offset() to determine what to scroll to:
A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):
$(".next").click(function(e){
$('html, body').animate({
scrollLeft: $(this).closest('td').next().offset().left
}, 1000);
e.preventDefault();
});
I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.
If you didn't want the animation you could do it this way:
$(".next").click(function(e){
$('html, body').scrollLeft($(this).closest('td').next().offset().left );
e.preventDefault();
});