Develop Reference

Disable default anchor jumping when clicking on a link

I've searched hours and finally found a light jQuery code which allows me to animate the click of an anchor link, but when I click on one link it animates down and then jump 100px to the top without animation because the hash is given to the url after the animation which leads to the default anchor link behavior when you click it.
I have a code sample for you with a little comment from me for a fix, or well I thought It'll be a fix...
// Scroll.js (https://css-tricks.com/snippets/jquery/smooth-
scrolling/#comment-1635851)
/*
* Scroll.js:
* 1. added -100 after the .top property which reflects the navigation height.
*/
$(document).ready(function(){
// Add smooth scrolling to all links
$('a').on('click', function(e) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
e.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-100 // /* [1] */
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});

Just write on the anchor href attribute javascript::void(0) as in
Though if you want it to act as an anchor and have a url... this will not work :(

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

Jquery to scroll down to top of each section with button press

This is my code: Js Fiddle
As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.
Normally it would be quite simple as I could do this:
$('body').animate({
scrollTop:$(document).height()
});
However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.
I guess the code would be something like (in pseudo): scroll to top sectiona + 1

with jQuery and smooth scrolling
$('a').click(function(){
var nextSection = $(this).closest('section').next('section');
$('html, body').animate({
scrollTop: $(nextSection).offset().top
}, 2000);
});

Why not you pass id's to each section and in href refer to that id like
<section id="sectionOne">
Move to section two
</section>
<section id="sectionTwo">
Move to section one
</section>

You can also try the following.
var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);
$(document).scrollTop(amount_to_scroll_by); // animate this scroll
Hope this helps :)

Using jquery, you can smoothly scroll to the target.
Here is a SAMPLE
JS:
$("a").click(function(e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({ scrollTop : $(target).offset().top + "px"});
});

You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.
I have created a very simple demo for you to understand this (not using your markup to keep it simple).
Demo: http://jsfiddle.net/abhitalks/9uxGq/15/
(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)
You need two anchors, one as click link and the other to mark the position of target as anchor.
For example:
<div>
<a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
<h2>Sub Heading 2</h2>
<p>
Some text content here
</p>
Learn More <!-- Used to click to got to next anchor -->
</div>
Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.
Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.
It would be as simple as this:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor
var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Alternatively:
// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) {
e.preventDefault(); // prevent the default behaviour
var nextAnchor = $(this).attr('href'); // get the next marker anchor
var gotoPoint = $(nextAnchor).position().top; // get the position of marker
$('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});
Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/
Hope that helps, and you can work it out in your markup and use-case.
.

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.