Develop Reference

Jump between sections with an anchor link and jquery

I have a code for make a smooth scroll with an anchor link, but what I want is make a fixed link on the window height and jump between each section available in the page. My link says Scroll to know more. When the user make click, it must to go to each section. My code so far is:
$("#over_scroll_text a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
//if (this.hash == "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
//var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
//scrollTop: $(hash).offset().top
scrollTop: $(document).height() - $(window).height()
//}, 800//, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
});
//} // End if
});
No idea of what can I do from here. Any help?

Line 9, 16, and 19 shouldn't be commented out

Outgoing links not opening because of smooth scrolling

For my anchorlinks I have set smooth scrolling, that is working. Also every outgoing link is working but not the outgoing links in the navigation (see green arrow in picture). Its producing a uncaught reference error. Why is this and how to solve this?
question is regarding this site: https://bm-translations.de/km.php
I had this problem at the beginning for all links and I could solve it with this code:
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function (event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function () {
// offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

Solution is the css :not() selector for excluding specific class from this function:
//Smooth scrolling when clicking an anchor link
$(document).on("click", ".navbar-nav a:not('.externallink')", function(event) {
event.preventDefault();
$("html, body").animate(
{
scrollTop: $($.prop(this, "hash")).offset().top
},
500
);
});

ScrollTop js function lag on first use

I am writing code for when a button is clicked it will animate going to a certain spot on the page. The problem is the first time I execute the code it is very laggy on the scrollTop animation. I am using w3schools code so I was surprised it was not working.
Here is the code I am using to animate the scrolling:
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (400) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});

Animate Scroll based on Hash Change

I'm currently working on a site which uses the javascript code below to animate over to the target element inside an href. How would I go about getting the code to animate when the back/forward buttons are clicked based on it's history.
/* ------ Smooth Scroll ----- */
$(document).ready(function() {
"use strict";
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
var target = $(this).attr("href"); //Get the target
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({ scrollTop: $(target).offset().top}, 2000, function()
{
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});

You need to listen for the hash change. There are many ways to do this. You can poll for hash change or use HTML5's history api with onhashchange method to listen for changes. The easiest way to do this is probably using some kind of library that already takes care of both. I recommend jquery plugin if you are using jquery. If you are using angular js or other stuff then look for those plugins.
You would do something like
$(window).hashchange( function(){
// Do the animation here
})
You would no longer need to animate on a click.

Remove/avoid adding target link to URL

This one may be simple for the jQuery/JavaScript gurus here, but I just can't find a solution for it around the web.
Case
I have a link at the bottom of a page that says Back to Top, the link is simply a target link like this:
Back to Top
So when you click it, it jumps to the top of page. Simple.
Problem
When the target link is clicked, the id #top is added to the URL of the page, ie:
http://website.com/about-us/#top
Question
Is there a way to remove or avoid getting that id #top added to the URL of the page but retain the functionality of the page jumping to the top?
Any help with this is greatly appreciated.

In either case (jQuery or vanilla JavaScript), you'll want to do the following:
Select all anchor tags where href is set to #top
Create a "jump" function which sets the page position to the top and returns false to prevent the default link behavior
Bind the "jump" function to the click event of all of the nodes found
To jump you have several options. I've provided them (jQuery and JS specific) in the first example below.
Using jQuery
jQuery makes selecting and binding to a click event easy. Then you can jump to the top of the page using jQuery or straight JavaScript.
$('a[href="#top"]').click(function() {
//
// To jump, pick one...
//
// Vanilla JS Jump
window.scroll(0,0)
// Another Vanilla JS Jump
window.scrollTo(0,0)
// jQuery Jump
$('html,body').scrollTop(0);
// Fancy jQuery Animated Scrolling
$('html,body').animate({ scrollTop: 0 }, 'slow');
//
// ...then prevent the default behavior by returning false.
//
return false;
});
jQuery's animate provides options for animation duration and easing along with the ability to set a callback.
Vanilla JavaScript
You can also use Vanilla JS the whole way through... Querying and binding, however, become a bit more painful.
Modern browsers support document.querySelectorAll() which will allow you to grab all of the link elements just as you would with jQuery:
var links = document.querySelectorAll('a[href="#top"]');
Then loop over the elements and bind the "jump":
for (var i = links.length - 1; i >= 0; i--) {
links[i].onclick = function() { window.scroll(); return false; };
};
If your target browser doesn't gift you with querySelectorAll you just loop through all of the anchor tags to find the ones linked to #top:
var links = document.body.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
var l = links[i];
if(l.getAttribute('href') === '#top') {
l.onclick = function() { window.scroll(); return false; }
}
}

$('a[href=#top]').click(function(){
$(window).scrollTop(0);
return false;
});
You need to stop the tag a's default event to trigger.

When handling anchor click events, always use e.preventDefault(); On Click of Anchor element. When you don't need anchor element.
e.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 'slow');

This will work
$('a.standard').click(function() {
$('body,html').animate({
scrollTop: 0
});
});