I have this problem with smooth scrolling on my website, where the script scrolls down to the <div>, but if you click the same <div> or any other <div>, it doesn't seem to understand where the next <div> is. Instead, it'll just bounce up and down around the same kind of area it was just at.
This is the website in question.
The script I'm using:
jQuery(document).ready(function() {
jQuery('a[href^="#"]').click(function(e) {
jQuery('#main').animate(
{
scrollTop: jQuery(this.hash).offset().top - 50
}, 1000);
return false;
e.preventDefault();
});
});
This will work fine only if I click the link when I'm at the top of the page, but won't work at all if it's from one link straight to the other.
Could someone have a look at the website and attempt to fix this please? As I'm a little out my depth with JavaScript.
Thank you.
Related
Hello Stackoverflow people!
I am having some trouble in JavaScript since I've been experiementing a little with different things something I've had a lot of trouble with is the following:
$(document).scroll(function () {
$('.header').toggleClass('scrolled', $(this).scrollTop() > 1);
});
This works fine, but I want to add an "animation" to it where it fades in when I scroll down on my page, and fades out when I scroll to the top of my page.
The class "Scrolled" is what I want to fade in and out.
Somebody that might be able to help me with this?
I am a semi-noob at web dev, however I am either searching with the wrong terms or I am not a very proficient googler.
I am making a one page website and want the effect that when a new section comes into view scrolling down, that the new section will darken. I can achieve darkening on mouse over, but I want the currently visible section to always remain dark until navigating away from it, not only when the mouse is hovering over the section.
I am thinking it may have to be JS as I cannot seem to find what I need in CSS, but perhaps the collective mind can help!
Cheers!
This is a little push in the right direction: http://jsfiddle.net/f5w35qu8/1/
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
if (scrolled > 10) {
$('section:first').addClass('darker');
}
else $('section:first').removeClass('darker');
});
I am having an issue. Im using a one page design for a friend with a fixed floating menu on the top. The problem I encounter is that when I click on a link it scrolls down but the offset is not right. Most the of time it scrolls down a little too much covering the content below the menu. What I am trying to achieve is that the scrolling stops at the div being exactly below my menu bar. The other issue is that somehow it wont scroll down when the space between two sections is too narrow. It tries but somehow only moves a few pixels then stops. I can imagine that both are related to the offset issue.
Im sorry, english is not my native language.
Here is what I got so far. A standard scrolling function with window.location.hash. The target are divs spread across the site.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can see an example of the problem live: http://rolfvohs.com/
What I tried so far was using the add.class function to bind the div with an extra padding when a link is clicked. It does work in a way but creates an awkward space. I also tried placing the divs at different locations but that does not fix the job either, just messes it up further.
I would appreciate some insight.
window.location.hash = target;
moves the scroll by default to the div position and you are setting offset top before the hash change so first its changes the offset after that it move to div location.
first try after removing the line "window.location.hash = target;" from the code
or
move the "window.location.hash = target;" out side and above the "$('.wrapper').animate({})" it will work .
I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.
If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.
There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.
i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/