Develop Reference

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>

You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

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."

Smooth scroll JS working with jQuery 1.11.1, but break with jQuery 1.12.3

This JS creates a Smooth scroll, it works with jQuery 1.11.1, but break with jQuery 1.12.3. Using this with a Wordpress site and would prefer not to load two versions of jQuery.
Can't figure out what to update to make it work again.
<!--smooth scroll to anchors-->
<script>
(function($){
var jump=function(e){
if (e){
e.preventDefault(); //prevent the "normal" behavior which would be a "hard" jump
var mytarget = $(this).attr("href"); //get the target
}else{
var mytarget = location.hash; //sets the target to the anchor part of a URL
}
$('html,body').animate( //perform animated scrolling
{
scrollTop: $(mytarget).offset().top - 100 //get top-position of target-element and set it as scroll target and move down 100px for fixed nav
}, 1000,function(){ //scrolldelay: 2 seconds
location.hash = mytarget; //attach the hash (#jumptarget) to the pageurl
});
}
$('html, body').hide()
$(document).ready(function(){
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
</script>
<!--End smooth scroll-->

jQuery 1.12.x does not like a[href^=#] without quotes around #.
It throws an unrecognized expression error.
Using quotes is recommended always.
$('a[href^="#"]').bind("click", jump);
Also there's an issue with your scrolltop in all jquery versions. $(..).offset() is null. This happens when your href is # or links to a non-existing id. You should also check that it's not an external link, and return, otherwise preventDefault will stop it from working.
See fiddle: https://jsfiddle.net/txau5yLf/

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

jQuery scroll to anchor with variable speed

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