Browser address bar displays #[object%20Object] when clicking the menubar - javascript

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

How to add easing to smooth scrolling?

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

Smooth Scrolling anchor with offset (jquery)

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);
});

JS Smooth Scrolling on Load interferes with Smooth Scrolling on Click

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;
}
}
});
});

Javascript - scroll effect interferes with links

$('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;
}
}
});

How to make a fluid anchor scrolling in a select option

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

Categories