I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?
I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.
Related
I cant solve why animate doesnt work only on one page.
Here is Link: https://tachomaster.pl
For test I add little gray sqaure on the left top corner, if you click this, script should scroll you a little down. As you can see it doesnt work only on main page, on any other it works.
Here is testing script:
$(document).on('click', '.test', function(event){
event.preventDefault();
$('body').animate({
scrollTop: 500
}, 800);
});
you need to hide overflow for all the containers under your body tag
I fix that by changing from
$('body').animate({
scrollTop: 500
}, 800);
to
$('html, body').animate({
scrollTop: 500
}, 800);
I completly dont know why it works that way and didnt work first way ONLY on main page.
Hi i added smooth scrolling in my website, but apparently it does just work in one pagers. How can i fix it,so it works in a absolut position element, which is scrollable? Link from my website and the javascript file.
$('a[href^=#]').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});
Ok i solved my problem. I just used a plugin called scrollTo:
https://github.com/flesler/jquery.scrollTo
After all the solution was pretty simple.
I have been working on a Bootstrap 3 page which scrolls using scrollspy and a jquery plugin. I have an unfortunate flickering issue when the page is scrolling to the desired link.
Edit: it was partially solved by the lovely lady below i.e. I had been stupid in some markup. however the flickering problem remains.
I have a fiddle that Illustrates the current problem here
here is is the scrolling javascript
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Its odd and I have no idea what is causing it (still a student)
Anyone else experience this? would be great to know how you overcame it
Thanks in advance
How to smoothly scroll a div to top of the page but just below the header.
I have the code in jquery but I need to convert this to pure java-script and should be working in all the latest browsers.
$('html, body').animate({ scrollTop: $("#mydiv"+id).offset().top - 55 }, 699);
I got the java script function to scroll but not the animation.
document.getElementById('mydiv'+id).scrollIntoView(); scrollBy(0, -55);
Can someone help me here , I need to add a small animation to the scroll. Thanks.
Is it possible to keep a simple function like this here:
$.fx.speeds.xslow = 1500;
function goToByScroll(id){
$('html,body').animate({
scrollTop: $("#"+id).offset().top
},'slow');
}
and make it for horizontal scrolling?
I want to keep things simple like this without using a big horizontal plugin. I was thinking scrollLeft, but could not get this to work with the offset... Any ideas would be great! Thanks in advance
Like you said, you can do this using scrollLeft:
function goToByScrollHoriz(id){
$('html,body').animate({
scrollLeft: $("#"+id).offset().left
},'slow');
}
See this fiddle for a working example (make sure Div #3 isn't visible on the page when you run it).