at the moment I am using the following Script for a smooth scrolling effect:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}`
It all works fine for the OnePager. But if I am on en "external site" for example the privacy policy and click on a menu point nothing happens. This might be because in the scripted I deactivated the links and replaced it with scrolling. I am not that good in jQuery, can you help me so that it also works form "external" sites? What do I have to add to the code?
Greetings
Related
I found that if I click one of the sections in menubar, the browser address bar displays #[object%20Object]. But it didn't influence scroll-to-section.
Partial code at reference:
<li class="scroll-to-section">Home</li>
<li class="scroll-to-section">Services</li>
<li class="scroll-to-section">About</li>
<li class="scroll-to-section">Evaluations</li>
<li class="scroll-to-section">Newsletter</li>
JavaScript Code:
$('.scroll-to-section a[href*=\\#]:not([href=\\#])').on('click', function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
var width = $(window).width();
if(width < 991) {
$('.menu-trigger').removeClass('active');
$('.header-area .nav').slideUp(200);
}
$('html,body').animate({
scrollTop: (target.offset().top) + 1
}, 700);
return false;
}
}
});
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('.scroll-to-section a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('.scroll-to-section a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
menu = target;
target = $(this.hash);
$('html, body').stop().animate({
scrollTop: (target.offset().top) + 1
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
I tried to update jQuery, but it didn't work.
Problematic Page
window.location.hash = target;
this is the problem. you can't set location.hash to an element. It needs to be an a name or id in the document. A string. Not an object.
This problem was caused by var target = this.hash, you can delete this line.
target is overwritten with a jQuery object containing the target element.
I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO
you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/
I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});
I wrote some jQuery that checks the location of the person on the page and add some classed.
But when I load the jQuery I see a lot of errors in the browser console.
When scrolling the number of errors increase.
I get the following error:
TypeError: undefined is not an object (evaluating 'refElement.position().top')
Geselecteerd element
How can I solve this?
jQuery:
(function($) {
$(window).scroll(function() {
var sticky = $('.menu-header-product'),
scroll = $(window).scrollTop();
var elementOffset = jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(window).scroll(function() {
var sticky = $('.content'),
scroll = $(window).scrollTop();
var elementOffset = jQuery("#productnav").offset();
if (scroll >= elementOffset.top - 88) sticky.addClass('sticky');
else sticky.removeClass('sticky');
});
$(document).ready(function() {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 88 /**just subtract the height of the fixed html part */
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event) {
var scrollPosition = $(document).scrollTop();
$('nav a').each(function() {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top - 88 <= scrollPosition && refElement.position().top - 125 + refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else {
currentLink.removeClass("active");
}
});
}
})(jQuery.noConflict());
You have not written any style for your .active class,
I have just added a color:red to it and it seems to work fine.
Working DEMO: https://jsfiddle.net/pytduk9q/3/
Hope this helps!
so I got this sticky header that works great the only problem I have is when I press a link and the screen scrolls down it overlaps my content so I need to set a -47px height or something like that so the # it scrolls to get below the menu and not under it.
My code
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').addClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
$(document).ready(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(closenav).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 760 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
Sorry if i'm not clear enough and need to explain it in another way.
Please keep in mind I'm a JS rookie!
Thank you!
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top -47
}, 500, function () {
window.location.hash = href;
});
return false;
});
add this within your $(document).ready(function(){});
I am trying to create a super simple Scroll to top button.
It works but it's appending the button to the body every time when i scroll.
I would like to append it only once and fade it in and if you click it you will be scrolled back to the top off the page and it will fadeout.
The functionality is working but its appending it to the page in an loop.
I know it's a simple bug but, I can't figure it out.
My code:
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var to_top = '<a class="back-to-top" href="#"></a>';
if (scrollPosition >= 500) {
$("body").append(to_top);
$('.back-to-top').fadeIn(1600);
} else {
$('.back-to-top').fadeOut(800);
}
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
});
Well, you're telling it to append the every time the scroll event is fired, so check if it exists first, see if it works out for you.
$(window).scroll(function () {
var scrollPosition = $(this).scrollTop();
var toTops = $('.back-to-top'); // get jQ object once
if (scrollPosition >= 500) {
if (!toTops.length){ // if no elems
// create one
var $to_top = $('<a class="back-to-top" href="#"></a>');
$to_top.on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
// then attach it
$("body").append($to_top);
} else {
// if elems exist, fade them in
toTops.fadeIn(1600);
}
} else {
toTops.fadeOut(800);
}
});
You should create button once and then hide/show it.
jQuery(function($) {
var to_top = $('<a class="back-to-top" href="#"></a>'),
visible = false;
to_top.appendTo('body').hide();
$( ".back-to-top" ).on( "click", function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(window).scroll(function () {
if ($(this).scrollTop() >= 500)
if(!visible){
to_top.stop(true,false).fadeIn(1600);
visible = true;
}
else
if(visible){
to_top.stop(true,false).fadeOut(800);
visible = false;
}
});
});