JS Smooth Scrolling on Load interferes with Smooth Scrolling on Click - javascript

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

Related

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

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?

Add offset to javascript

I've got a small script to slide between waypoints on my website:
$(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;
}
}
});
});
Now I've got to add an offset. If the users clicks on JUMP!
The javascript should scroll to the <div id="#jumper"></div> with an offset of 500px. I didn't figure out the right code-section.
if (target.length) {
$('html,body').animate({
scrollTop: target.offset(+500).top
}, 1000);
return false;
}
.offset(+500) <-- 500px

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

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