ScrollTop not working correct with parallax effect - javascript

I'm implemented a pure css parallax effect in my website. Next step was to implement the scrollTop functionality the site is a one page layout.
$(document).ready(function($) {
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('#container').animate({
scrollTop: $target.offset().top
}, 2000);
});
});
With this I get a strange behavior:
initial start, click on anchor -> it scroll to the div
click on another anchor -> it does what it does not what it should
here the jsFiddle for you: https://jsfiddle.net/5pwctshp/2/
after some research could it be the overflow property that trigger the bug/problem?
Thank's in advance

Related

Scroll to specific section, smooth at first but then jumps/shifts down the screen

I'm currently trying to get my navigation bar (fixed at the top of the screen) to work better. Currently, if you press on a link within the nav bar, it will go to a certain section with this code:
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
However, it will go to that section but then shift down on the screen and cover content. But if I press the same section again, it will go to the correct spot. I need it to go to the correct spot on the first click.
When I take out the "- 35" part within animate(), it doesn't shift down and goes smoothly, but I need the "- 35" part to offset the nav bar or else it will cover content every time. What is causing this jumping/shifting? Any advice or information that would be helpful? Thanks!
Note: I also have this code, but I'm not sure if it's part of the issue:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed');
}
});
UPDATE: I fixed my issue by reading more into the details of jQuery's animate. The parameter "complete" (a function to call once the animation is complete, called once per matched element) that I was using was not necessary, so I removed it from my code.
You need to avoid setting the hash after the animation is completed. As you use an offset for the animation (the -45) the animation will run smoothly to the given coordinates, and then it will jump to the hash position when you set the location.hash (after the animation is completed). The solution is to remove the hash from the location (the preventDefault() does that), and don’t set it again after animation is completed.
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').animate({
'scrollTop': $target.offset().top - 45
}, 400, 'swing');
});

How to disable visitor's scrolling and allow scroll only on click scrolling to div (<a href="#div">)

I want to disable visitor's scrolling with scroll bar or scroll wheel on mouse and allow only to scroll down with button image .
I tried to add "overflow: hidden" but it just mess up website, demo: here.
And here is demo of my website (with scroll bar and scroll wheel mouse allowed): click here.
Any helps? Thanks.
PS. if im going to get negative ragings and reputation again, please provide any comment with reason why are you giving negative reputation always.
You can do this with jQuery, just in you index.html file at the top add this line of code :
jQuery(document.body).css('overflow', 'hidden')
Let me be more precisely, in your code it would be:
$(document).ready(function(){
//ADD HERE
jQuery(document.body).css('overflow', 'hidden')
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
And it will work!

How to Implement both Horizontal and Vertical Smooth Scrolling

I've been putting together a personal project. I'm relatively new to Java so picking it up as I go along.
Basically I have created a site which has sections I want accessible along both the x and y axis.
I have made these sections accessible using anchor links, so the site does link to these div's.
I have also managed to set up the Vertical smooth scroll animation. So my page can auto scroll up and down seamlessly using the following code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
However I can't seem to get the same scroll affect to apply for the div's located left/ right. what I want to happen is if I click a link which should go to a Div located to the left or right (off screen) it does a similar seamless smooth scroll left or right while keeping the same up/down animation.
Basically I want to apply both vertical and Horizontal smooth scrolling on the same page.
What changes or additions do I need to make to apply this?
I managed to implament horizontal scrolling on my site by making some tweaks to the above code.
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
This seems to work with horizontal scrolling. Now I need to make these work together at the same time...
I've added both to a seperate file and referenced them in my HTML. However now only the horizontal works. Anyway to make both work at the same time?
I managed to find an answer for this in the end and will post it up for future reference and aid.
Basically when I say I want to use both vertical and horizontal auto scroll I'm not talking about auto scrolling diagonally. I simply mean I have multiple links on a single page. Some which should auto scroll to a different section along the Y axis and some which auto scroll along the X axis.
So to do this I created 2 Js files with the following code and referenced them in my html. I also defined a class on all my links to specify which js file should be associated. e.g. 'up' was for my up/down auto scroll;
Vertical Scroll:
$(document).ready(function(){
$('a.up').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
Horizontal scroll:
$(document).ready(function(){
$('a.left').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
HTML for assigning a class to a link;
<a class="up" href="#tutorial">Link</a>
Class referenced in js file as shown above;
$('a.up').on('click',function (e)
The problem I was having is as follows. The vertical and horizontal codes conflicted. Both of them used;
$('a[href^="#"]').on('click'
Which meant when a link was clicked it performed the action. There was nothing to distinguish which direction the action should go when the link was triggered.
by changing this to;
$('a.up').on('click'
and introducing classes to my links I could specify which links should trigger which JS file and work as expected.
I hope this helps anyone with a similar problem or just looking for some aid with auto scrolling.
Feel free to ask questions. :)

Smooth Scroll for anchor links not working

I'm trying to get a smooth scroll effect for my anchor links on a clients website. For some reason the anchors stop working at all when I add the scroll code. I tried doing a pen with just a nav and the code and it worked fine, so it must be something else on my page causing the issue, help please??
http://codepen.io/anon/pen/dYegMK <-- its a bit barren but I had to delete the clients content for their privacy
(function($) { 
$(document).ready(function() {
$(function() {
$('nav#cssmenu a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 95)
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
}); 
});
}(jQuery));
Try to use linear and swing easing.
You can find more info here Easing functions in jQuery

Offset top how to implement this?

I am creating a onepage design. Now I work with a fixed header menu with links that are linked to there sections. I have get some code for get a smooth look.
Problem
When I click a menu item, it will go to the correct section, but the section will be on top of the browser screen. Now I want to add a offset of 120px top. How can I do this?
CODE:
// When you click on an <a> that has a '#'
$('nav#primary-navwrapper a[href^="#"]').bind('click.smoothscroll',function (e) {
// Prevent from default action to intitiate
e.preventDefault();
// Targets the part of the address that comes after the '#'
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
// The .offset() method allows us to retrieve the current position of an element relative to the document.
// Here we are using it to find the position of the target, which we defined earlier as the section of the address that will come after the '#'
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
Thank you.
Casper
Try:
'scrollTop': $target.offset().top + 120

Categories