jQuery scroll to anchor with variable speed - javascript

I have a very basic HTML site with a few anchor tags. On click each anchor leads to the other, using a little bit of smooth scroll with this function:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault(); var target = this.hash; var $target = $(target);
$('html, body').stop().animate(
{
'scrollTop': $target.offset().top - 300
},
900,
'swing',
function () {
window.location.hash = target - 300 ;
}
);
});
});
The gaps between the anchors will be quite big and I am trying to figure out a way to get the speed to vary - when clicked on an anchor, to start slower, than speed up, when close to the next anchor to slow down again before it stops.
Could not find any JQuery docs on it, does someone has a suggestion?
FIDDLE: https://jsfiddle.net/koteva/ovf9ywb3/

I believe you would want to use an easing function to handle this. By default, jQuery only handles swing easing, which you have already passed into your animate function. However, you can include additional easing functions with a plugin.
George Smith has a lightweight js plugin for download that may help you, called jquery.easing.1.3.js. I think easeInOutQuart sounds like the closest thing to what you are looking for
Here is a demo fiddle

By including jQuery UI (after jQuery) you will be able to use the easings listed here
Your code should look like:
$('html, body').stop().animate(
{
'scrollTop': $target.offset().top - 300
},
900,
'easeInOutCubic',
function () {
window.location.hash = target - 300 ;
}
);

Related

Smooth Scrolling with only vanilla JavaScript

I have always used this jQuery script for smooth scrolling:
var root = $('html, body');
$('a[href^="#"]').click(function() {
root.animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
return false;
});
How can I do this with vanilla JavaScript? I have tried this:
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
But it doesn't work with Safari, which is a deal breaker for me.
As you can read on the docs safari doesn't support options parameters on scrollIntoView so you'll need to find another method. I suggest taking a look at this alternative.

JQuery animation doesn't scroll to correct location location during page load

I have a button which scroll to a "target" div when pressed.
The button and the target div are being injected as an external widget to the site.
the function of the button:
scrollToElement = function() {
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetElementClass").offset().top - 10
}, 1000);
//other code
}
It seems that when page load the first press on the button scroll to a different location of the page.this only happen during the page load as it seem there is some kind of race condition between the scroll top calculation and the actual location of the "target" div during the load.
I thought of "stop(true,true).animate(......)" but as I read from the documentation it can stop other animation on the page so I think it may interfere with the customer site functionality and I ruled that out (please let me know if I'm wrong).
Do I have another option except the stop function to try and counter this issue?
Also I wonder if that behavior can be caused by other code performing "jQuery().stop()" and is there some kind way of resolving such collision?
I have a small scrollFunction that I think works well and it is pretty dynamic. You just simply create a button and in the onclick parentheses add your target id/class. First you need a button in your .html file that looks like this:
<button type="button" onclick="scrollFunction(putYourTargetDivHere)">This is a button</button>
Then in your javascript/jquery file use this:
function scrollFunction(target) {
$('html,body').animate({
scrollTop: $(target).offset().top
},
'slow');
}
And if you want to run the function when the page loads you can use this:
window.onload = function() {
scrollFunction(YourTargetDivHere);
};
Best regards Max
It seems like my intuition was correct and some element which was loaded after my widget was stopping the scrolling animation , after adding additional animate on "complete" and "fail" function of the animation the scrolling now reach the correct location (though it is a little bit sluggish).
window.scrollToElement = function() {
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 1000,
queue: false,
complete: function(){
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 500,
queue: false});
},
fail: function(){
jQuery([document.documentElement, document.body]).animate({
scrollTop: jQuery(".targetelementClass").offset().top - 10
}, {
duration: 500,
queue: false});
}
});
// other code
}
The result is that on failure or if something mark the animation as complete before actual completion another animation is being made.
It is not perfect as the scroll seem to be lagging sometimes and I assume more tweaking are needed.

jQuery smooth scroll for WordPress not working

I've been trying to make my links work on my theme I am creating but I have no knowledge of jQuery for the smooth scrolling. In my theme I used the following jQuery I saw was working online:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
In my dynamic WordPress menu I set the urls to #values, #about, #contact etc. and the links to it on the specific places on the page I used <span id="values"></span>, <span id="about"></span> and <span id="contact"></span>
It works, but the smooth scrolling doesn't work. I see that anchors are used for smooth scrolling online in the parts of the page but I want to be able to target the id of the span tags. I tried to make an anchor tag to test if it works but it still doesn't.
How do I get this to work?
Miro replied in the comments the correct answer - "In Wordpress you need to add external jquery or equate the dollar sign to the one already in use. Try adding $ = jQuery; above all your scroll code. If that doesn't work replace all $ with jQuery."

Jquery scroll to offset target div on page load

I'm trying to scroll to the div that is in the URL. It could be one of 21 IDs like:
url.com/test#lite1
url.com/test#lite2
url.com/test#lite3
I need this to happen on page load (user is coming from an ebook and should see the exact item they clicked on).
Here is the code I currently have:
$(document).ready(function(){
$('a[href^="#"]').load(function() {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
It doesn't work and I think it's because of this part (I have no idea what I'm doing here):
$('a[href^="#"]').load(function() {
I also want it to be in the center of the page (not at the top cut off like browsers do when scrolling to divs). Please let me know if this is correct:
$target.offset().top -150
Thanks so much in advance!
window.location.hash contains the current hash in the URL so use that. As the hash is already in the URL(as you said that they come to page by clicking on link with hash) so you don't need to add it manually.
Try using this :
$(document).ready(function(){
$('html,body').animate({
scrollTop: $(window.location.hash).offset().top-150
}, 900, 'swing');
});
Using wordpress, it seems the $ needs to be replaced by jQuery so it comes out to:
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
As an alternative, you could try using the following jQuery plugins. I've used them on multiple projects. They're customizable and provide nice, smooth animation:
scrollTo (download, documentation) allows you to scroll to a specific element on the page. Basic usage: $(element).scrollTo(target);
localScroll (download, documentation) requires scrollTo as a dependency, and handles anchors for you. You can apply it to specific set of links by selecting their container: $('#link-container').localScroll();, or you can activate it globally: $.localScroll();

Best method for Auto scrolling to previous place without jquery (PHP and Javascript)

I have done my homework and seen allot of different methods of accomplishing this. But what is the most effective way that is cross-browser error "proof".
Some things I have tried...
body.onload = function(){
window.scrollTo(0,<?php echo $_POST['scrolltext'];?>);
};
With scrolltext coming from a hidden input filled by a document.getElementById('scrolltext').value = window.pageYOffset || docElem.scrollTop || body.scrollTop
Also...
$(document).ready(function() {
$('#<?php echo $_POST['site']; ?>').scrollIntoView(true);
});
with many otherr forms of this, where the posted site being a ID linked by php on the page based on the button pushed. But I found Jquery's methods very unreliable and Ipad's especially seem to hate everything to do with jquery(especially panels)...
So i figured the best way to do it would be javascript? some PHP methods I cant really think of?
Thanks in advance.
Scroll to the top of a document
$("html, body").animate({ scrollTop: $(document).height() }, 300);
Scroll to the top of an element
$('html, body').animate({ scrollTop: $("#itemid").offset().top }, 800);
Scroll to the top of a specified element
var itemid = $("#daitemid2").val(); //method 1
var itemid = $(this).attr("itemid"); //method 2
$('html, body').animate({ scrollTop: $("#itemid"+itemid+").offset().top }, 800);

Categories

Resources