Using Smooth Scroll without a link on Status Bar

Question

I started a new project for my college and my code have a problem.

When I'm using Smooth Scroll to go to another anchor, the #name_of_the_anchor link appears on status bar.

The Smooth Scroll only works if I use "a href", so, the status bar will ever show the link of every div.

The Javascript:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
        }, 400, 'swing');
    });
});

How can I change this code to not show the links on status bar, but keeping the Smooth Scroll on my site? Thank you, guys!

edcs edcs · Accepted Answer · 2015-10-18T17:39:02

You could do something like this with your link:

<a href="javascript:;" data-target="#anchor-name">My Link</a>

And then do something like this with your JavaScript

$(document).ready(function(){
    $('a[data-darget]').on('click', function (e) {
        e.preventDefault();

        var target = $(this).data('target'),
        $target = $(target);

        $('html, body').stop().animate({
           'scrollLeft': $target.offset().left
        }, 400, 'swing');
    });
});

Which would prevent the default browser behaviour. This isn't really the best way to do it though because there wont be any failback should the JavaScript fail to run in anyway (i.e. if the user has disabled JS or something else stops the scripts from running).

Using Smooth Scroll without a link on Status Bar

1 Answers