We Keep Coding

Disable Smooth Scrolling on Non-Anchor Hash Link?

I have some jquery for smooth scrolling:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
Which works fine, except that I have some tabs on the page that use a hash link also. When you click each tab, the page scrolls to the top of the screen.
Is there a way to make this smooth scroll work, only when a specific anchor is added to the hash (like /#features) and not work when it is a hash only (like /#)

You can add a :not() selector to eliminate href="#" from triggering your click event.
$(document).on('click', 'a[href^="#"]:not([href=#])', function(event) {
console.log("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hash Only
Anchor 1
Anchor 2

Dynamic jQuery Smooth Scroll to Anchor

I have a code snippet from the W3 schools that creates a smooth scroll function to anchor tags within a page. It does this dynamically by looking for anchors that have hashes in it, and I would like to keep it this way without having to add classes etc. The issue I'm experiencing is when the script appends the URL to include the anchor id, it breaks the top offset. How can I append this code to prevent that from happening?
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top-125
}, 1000,
function(){
window.location.hash = hash;
});
}
});
});

Removing anchor tags from URL

I'm using a bunch of anchor tags for mobile browsing due to a very long page but when the anchor tag is clicked it adds it to the url. Here is a small mock,
page down
<span id="anchor"></span>
How can I retain the anchor functionality and prevent #anchor being added to the url?
Cheers

You could use scrollTop to achieve the same effect:
$('.js-hook--page-down').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#anchor").offset().top - 200
}, 1500);
});
And the HTML:
<a class="js-hook--page-down">page down</a>
<span id="anchor"></span>
You need a new js hook for each of the page anchors though.

It's up to you how you'd want to go about it, but I would do this:
<script type="text/javascript">
$(window).on('hashchange', function(e){ // listen if hashtag is being added to the URL
location.href = location.href.replace(location.hash,"") //replace it with nothing
console.log("bam!"); //enjoy it
});
</script>

#DGibbs I took your code an modified it so that rather than having to write it out for each anchor on the page you can use this instead
$('.js-anchor').click(function (evt) {
evt.preventDefault();
var anchor = $(this).text();
$('html, body').animate({
scrollTop: $('#' + anchor).offset().top
}, 1500);
});
Maybe this will help someone else too. For reference the html looks like this
<a class="js-anchor">Top</a>
<span id="Top"></span>
Obviously with this code your anchor id must match the text inside the link for it to work

Add click event listener to your links and use preventDefault.
$('.mylink').click(function(event){
event.preventDefault();
});
This will stop the links from modifying the urls.

JavaScript inside the A HREF keeps jQuery function from working

I'm using a WordPress plugin to display a list of locations and a map of those locations.
I created the following function so that a link will scroll to a map when a link is clicked.
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function() {
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
However, the plugin automatically adds the following to each link:
href="javascript:open_current_location(marker2259map2)">
This link causes the map-marker to open, however, it appears to be preventing the jQuery function from scrolling the page to the top of the page.
Any ideas how to overcome this?

You need to cancel the default event inside your click handler:
jQuery(document).ready(function($) {
$(".wpgmp_location_title h3 a").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#map-selected").offset().top
}, 2000);
});
});
Fiddle

An approach could be to override the open_current_location() function.
Take a look at this example, you could also execute the scrolling and then the original behaviour of open_current_location()

How to make page scroll to a specific element when clicking a button? Scroll animation, if possible

As the title says I want to make the page scroll to a specific element on the page when the user clicks a text/image. If it's possible, I don't want it to just skip to that element, but have a scrolling animation to it.
I know it's possible to do in JS, but I forgot how you do it.

Depending on your specific needs you can organise the code in such way, so that you can pass the id of the element that needs to be scrolled to the click handler.
Click me
<div id="scrollHere"></div>
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
}
});
This will scroll the page to #scrollHere element over a period of one second (1,000 milliseconds = 1 second).
Or in a more generic way:
$('.someElement').on('click', function(event) {
var target = $('#someElementToScrollTo');
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
});