I am building a single page website. I have common website stuff on it like: services, portfolio, contact, blog, etc.
If someone clicks the navigation menu for 'services', 'portfolio' and 'contact' it scrolls to the item that the user wants. Normally this is up and down scrolling so there is no problem.
The idea I have is when the user wants to go to the blog, it scrolls to the right or make a push effect of the blog coming from right to left. Right know I have something working. The problem is that when I am on the last section, which is contact, this is at the bottom of the page. If I want to go to the blog it is scrolling to the top and then to the right to see the blog.
I am pretending to remove that scroll to the top, and just make a right scroll and see the blog section from the top.
Any idea on how to handle this? Or would it be better to have an independent html file?
Edit
http://jsfiddle.net/VS9dS/20/
scroll from blog to any section and/or moving from any section up or down.
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");
scroll from any section to the blog:
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");};
$('html, body').animate({scrollLeft: $(sectionName).offset().left}, "slow");
I didn't add much code for the lack of time. Right now is working on my code that if I'm on contact section and I click the blog contact it scrolls to the top and then scrolls right to the blog section, and blog section looks like a complete different html.
What I would like it to do is the if I'm on contact section and clic to the blog just do a left scroll and show the top of the blog, and the same way if I'm on services, home
If I got you right and you just want to first animate one thing and then the other, you could do something like this:
$('html, body').animate({
scrollTop: $(sectionName).offset().top
}, "slow", function () {
$('html, body').animate({
scrollLeft: $(sectionName).offset().left
}, "slow");
});
...or I can try again and you wanted to animate a scroll to the right after scrolling to the top. Then you could do this:
$('a[href=#blog]').click(function () {
$('html, body').animate({
scrollTop: $('#home').offset().top
}, "slow", function () {
$('html, body').animate({
left: '-=200px'
}, "slow",'linear'); //looks better I guess
});
});
CSS:
body {
position: relative;
}
Fiddle: http://jsfiddle.net/Matze/eRNde/
http://api.jquery.com/animate/#basic-usage
Related
I've got a WordPress menu item with Javascript successfully attached, and I'm trying to make it scroll to the bottom of the page when clicked on. The scrolling itself worked fine, but I found that the page would jump up to the top for a fraction of a second before scrolling down to the bottom. That code looked like this:
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
});
I googled around for a solution, and ended up with this
$("#menu-item-135").click(function() {
$('html, body').animate({ scrollTop: $(document).height() - $(window).height()}, 500);
return false;
});
All I did was add 'return false;'. That solved the jumping to the top problem, but now the page jumps to the bottom before scrolling instead! Does anyone have any other ideas for what I might try?
window.scrollTo(0, 0);
you need to try this.
I have arrows in the center of my web pages at the end of sections and I was these to allow users to scroll to the next section on click. I have the following code where the first click works but subsequent clicks do not scroll even though the function is being called each time.
$('.scroll').on('click', function(event) {
alert('scroll');
$('html, body').animate({
scrollTop: $(".scroll").offset().top
}, 1000);
});
Can anyone assist? https://jsfiddle.net/avL459sm/2/
You should use current .scroll element you clicked on.
Look at this fiddle: https://jsfiddle.net/avL459sm/3/
i want to create a webpage like http://seller.flipkart.com . I want to scroll my page first from up to down and then left to right using scrolling button only and background drawing. Can you tell me how can i do this and which languages should i learn?
$('html, body').animate({scrollLeft: -$(sectionName).offset().left}, "slow");
$('html, body').animate({scrollTop: $(sectionName).offset().top}, "slow");
The effect you are talking about is known as parallax effect.
Use this skollr plug-in (demo link : http://prinzhorn.github.io/skrollr/)
This is my jQuery code:
$(document).ready(function(){
$("#home-btn").click(function() {
$('html, body').animate({
scrollTop: $("#header").offset().top // Problem
}, 2000);
});
});
Can offset actually accept a value of bottom?? Since this is one of the links at the bottom of my page and I want to scroll from bottom to top. This brings in the top of the page for a second and then scrolls from bottom to top. How to make a smooth scroll effect?
You say it is a "link", perhaps you just need to prevent the default action of the link:
$("#home-btn").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#header").offset().top
}, 2000);
});
Otherwise, it seems to work: jsfiddle
I need scroll my page when my user click in a button
I'm using the following code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
But, with this code, my page scroll until the div is found and get the top propertie, and I need that this div reach a specific .offset().top, i.e. scroll a little bit more until reach my fixed navbar.
How can I make this using scrollTop ?
Grupo Produto - Ticket Médio is the title of the $("#divTicketMedioGrupoProdutos"), look that right now is so close of my navbar because I scroll the page. I want this when my user click in a button.
UPDATE
Look at the image below, when I click on the green bar in the chart, generate a new graph;
And in the image below, with the code
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top
}, 'slow');
you can see that the page scrolls but the new div are in the middle of the page because didn't scroll so much (with the code)
What about adding additional pixels to your .offset().top() call?
$('#content').animate({
scrollTop: $("#divTicketMedioGrupoProdutos").offset().top() + 70
}, 'slow');