How to add easing to smooth scrolling? - javascript

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

Related

How to make the vertical scroll animation stay at N point while scrolling

<script>
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
$(".link").removeClass("active");
$(this).addClass("active");
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 have this function to make the vertical div scrollable, how do I implement the function to make it trigger only at certain points?

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

jQuery smooth scrolling to anchor not working

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.

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