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
Related
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'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
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;
}
}
});
});
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;
}
}
});
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?