Smooth Scrolling for specific anchor links

Question

I'm using Google's smooth scrolling script for a specific anchor link #tothetop and not with any # only. I've done this in the example.js file (that you download with the script):

Changed:

$('a[href*=#]').click(function() { ... });

To:

$('a[href*=#tothetop]').click(function() { ... });

So now it only applies the smooth scrolling to #tothetop , but how would I apply it to other different anchor links? eg: #tothetop , #tothebottom , #gotothepub , etc.? (Don't ask why I'm not using the '#' because that's a long story but in short - it conflicts with another script on the page) I've tried:

$('a[href*=#tothetop]','a[href*=#tothebottom]').click(function() { ... });

But this doesn't work. I'm not too knowledgeable with Javascript and PHP but I'm sure there's a simple way to do this?

Full code for example.js goes like:

$(function(){

$('a[href*=#tothetop]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {

        var $target = $(this.hash);

        $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

        if ($target.length) {

            var targetOffset = $target.offset().top;

            $('html,body').animate({scrollTop: targetOffset}, 1000);

            return false;

        }

    }

});

});

Answer 1

try with

$('a[href^="#"]').click(...);

this selector will match all anchors in which href attribute is starting with # .

Your example is valid but it should be written like so

$('a[href*="#tothetop"], a[href*="#tothebottom"]')

Note the quotes around the value and the single quotes (used just once).

Answer 2

I'd use this, because obviously you name your scrolling anchors all with "toTheAnchor":

$('body').on('click', 'a[href^=#][href*=to]', function() {});

This should select all links starting with "#" and have "to" in the word.