jQuery smooth scrolling to anchor not working - javascript

I have used smooth scrolling before with no issues as I am unsure what is preventing it working this time. I am not getting any errors in the console that has anything to do with the smooth scrolling. The website url is:
http://tinyurl.com/oprfwd6
And the current code for smooth scrolling:
jQuery(document).ready(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;
}
}
});
});
If any one has any suggestions as to what could be preventing that would be great.

Related

Smooth scroll to ID

I have this smooth scroll script on my website. I'm trying to make the smooth scroll, scroll to the target ID but stop about 20px before the ID.
This is my code:
$(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;
}
}
});
});
I tried changing the target.offset but this didn't work. Is this possible?

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

Smooth scrolling not working jQuery

Using the code from https://css-tricks.com/snippets/jquery/smooth-scrolling/ and for the likes of me can't figure out why it's not working.
Script:
$('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;
}
}
});
Website:
www.soelite.net/layout/
Any ideas what it could be? The site jumps to the div container but doesn't animate.

See this answer: https://stackoverflow.com/a/2234749/606104
I was having this problem in safari and chrome (Mac) and discovered that .scrollTop would work on $("body") but not $("html, body")
To make it work in Safari change your script to:
$('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) {
var bodyElement = $("html,body");
if ($.browser.safari) {
bodyElement = $("body")
}
bodyElement.animate({
scrollTop: target.offset().top
}, 1000);
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;
}
}
});

Remove the anchor from the URL

I'm using that code to scroll to the anchor:
$(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;
}
}
});
});
You can check it here - on the header menu when you click "Contato".
But every time it scrolls to the div, my URL changes to www.mcsoftware.com.br/sitemc/#nameofthediv
Is it possible to remove it?

Categories