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.
Related
I have this script where I'd like to add some easing to make the whole scrolling effect a little smoother:
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
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) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top}, 1000,
function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus(); // Set focus again
};
});
}
}
});
So I picked this line and added 'easeOutExpo', but unfortunately it didn't work. Any idea what I'm doing wrong?
scrollTop: target.offset().top}, 1000, 'easeOutExpo',
https://jsfiddle.net/3gb4s2af/1/
Please include the line mentioned below after jQuery script.
this worked for me.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>
OR:
Download custom jQueryUi from here
Im using the following code to add smooth scrolling for anchors on my site.
Because i have a sticky header id like to offset this by say 200px
$('a[href*="#"]:not([href="#"])').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) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
Try add or remove a value in the scrollTop animation
$('a[href*="#"]:not([href="#"])').click(function() {
var offset = -200; // <-- change the value here
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) {
$('html, body').animate({
scrollTop: target.offset().top + offset
}, 1000);
return false;
}
}
});
A simpler example with no hash is:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top + -200
}, 1000);
});
I'm new to JS, trying to make the following code work so that the homepage automatically scrolls on load and anchor links on other pages scroll smoothly on click...
<script>
$(function(){
$('html, body').animate({
scrollTop: $('.destination').offset().top
}, 2000);
return false;
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
});
</script>
Any help would be much appreciated!
Thanks,
Andreas
It is because you are closing the function by returning false earlier. Try:
$(function(){
$('html, body').animate({
scrollTop: $('.destination').offset().top
}, 2000);
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
});
$('body a').click(function(e){
e.preventDefault();
var goTo = $(this).attr('href').replace('#','');
$("html, body").animate({
scrollTop:$('a[name="'+goTo+'"]').offset().top
},1100);
window.location.hash = "#"+goTo;
});
There's my javascript code, which works fine, except when I try to click on links I get this error:
TypeError: $(...).offset(...) is undefined
this is because of e.preventDefault();
it prevents links to work, and you set it to all a tags in the body
try using another script
try:
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1100);
return false;
}
}
});
I can't make a fluid scrolling with a select option element, only with a link. Can anyone help me?
jsfiddle demo!
$(function() {
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Thanks!
Just do:
DEMO
$('select').on('change', function () {
$('html,body').animate({
scrollTop: $(this.value).offset().top
}, 1000);
});
And remove onchange inline attribute