1

From this answer, I found the code to animate the scroll to any anchors here.

The site in question is Wordpress, so I replaced $ with jQuery:

jQuery(document).ready(function() {
    jQuery('a[href^="#"]').on('click', function(event) {
        var target = $(this.href);
        if( target.length ) {
            event.preventDefault();
            jQuery('window').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
    }
});

Edited thanks to A Wolff.

However, clicking the anchors at the top of the content on this page does not scroll the movement to the anchor, it still moves instantly on click.

e.g. links that don't scroll to anchors:

  • PERSONAL ASSISTANTS
  • AFTER SALES SERVICE etc.

Assistance appreciated.

Community
  • 1
  • 1
Steve
  • 2,509
  • 11
  • 48
  • 88
  • 1
    You aren't binding event to these anchors here because you are setting this snippet inside HEAD part of page without wrapping it inside any relevant handler, e.g, document ready one. – A. Wolff Jun 11 '16 at 09:51
  • 1
    twice `jquery` script included in page – Vitaly Jun 11 '16 at 09:54
  • @Vitaly: do you mean `/wp-includes/js/jquery/jquery.js?ver=1.12.3` & `/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0` ? – Steve Jun 11 '16 at 09:58
  • @Steve I appreciate :) And my bad but don't use `jQuery(window)`, use your previous code `jQuery('html, body')` i made a mistake here – A. Wolff Jun 11 '16 at 09:59
  • SyntaxError: missing ) after argument list. You have missed `jQuery('a[href^="#"]').on(` closing `)` – IqbalBary Jun 11 '16 at 10:02
  • And now you are using undefined `$`, replace it with jQuery or pass it as ready handler param: `jQuery(document).ready(function($) { ...});` (this is typical WP syntax because this CMS uses jQuery noConflict method) – A. Wolff Jun 11 '16 at 10:03

2 Answers2

1

This work!

jQuery('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    var anch = this.href.match(/#[a-zA-Z0-9-_]+/i),
        target = jQuery(anch[0]);

    if( target.length ) {

        jQuery('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});
Vitaly
  • 1,191
  • 1
  • 9
  • 20
  • Not for me Vitaly. Is it both `/wp-includes/js/jquery/jquery.js?ver=1.12.3` & `/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.0` - are these duplicate jQueries? – Steve Jun 11 '16 at 10:06
  • @Steve No jQuery migrate isn't dupe of jQuery. BUT in your site, you have still removed ready wrapper! So again, if setting snippet in HEAD part, use document ready wrapper – A. Wolff Jun 11 '16 at 10:07
  • When `console.log(this.href)`, output like this - `http://staging.venusanddiamonds.com/shopping#riskfree` then `jQuery('http://staging.venusanddiamonds.com/shopping#riskfree')` it's not correct, i fix this in my answer, insert script on your site by console and this fine works. – Vitaly Jun 11 '16 at 10:10
  • You beauty! Worked Vitaly. Thank you mate. – Steve Jun 11 '16 at 10:51
1

Binding every anchor with scroll event sounds kinda bad imo.

Why don't you add .scroll class on the scrollable links and execute the script only on that class? What if you want to link to an outside content? If you have made every link scrollable, you won't be able to open it normally, breaking the natural usage of the links.

I like to add .scroll class on the links that should scroll somewhere and use

$(".scroll").on('click', function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    var hash = href.split('#');
    var url_hash = '#' + hash[1];
    if ($(url_hash).length > 0) {
        var offset = ($(window).width()<769) ? 20 : 65;
        $('html, body').animate({
            scrollTop: $(url_hash).offset().top-offset
        }, 1000);
    } else{
        location.href = href;
    }
});

This way your normal links that should point to another page, or outside content will still work.

Just a suggestion :)

dingo_d
  • 9,839
  • 10
  • 62
  • 102
  • 1
    Your form section doesn't have id form like `id="form"`. Either put an empty div with that id where your form is to scroll to it, or put that id on an existing section, and it will work (I added id in inspector and it scrolled fine). – dingo_d Jun 26 '16 at 06:27
  • Thanks. There is an anchor ``. Any link pointing to /#form will move to that anchor. Will your code not work with an html anchor? – Steve Jun 26 '16 at 10:10
  • It can be any element as long as it has an id that equals form ;) – dingo_d Jun 26 '16 at 10:15
  • Okay. Well, it is, but the scroll is not animated...? – Steve Jun 26 '16 at 11:21
  • 2
  • Glad I could help :) – dingo_d Jun 26 '16 at 12:58
  • Dingo D, I've copied the script to [another page](https://staging.venusanddiamonds.com/shopping) but can't see why the page doesn't scroll when clicking links. Can you help? – Steve Jun 26 '16 at 13:58
  • You have several errors on your page, plus I don't see a script with the code on this page. Clear all the errors and be sure that the script with the above code is present on the page... – dingo_d Jun 26 '16 at 14:18
  • Sorry. Forgot to mention; I've replaced `$` with `jQuery` as the site uses Wordpress. The code starts on line 259. The errors are unrelated. – Steve Jun 26 '16 at 14:44
  • 259 line of what file? I've looked at the scripts in the inspector and couldn't find the code – dingo_d Jun 26 '16 at 15:36
  • Line 259 of the [webpage](https://staging.venusanddiamonds.com/shopping). It starts with `// .scroll to anchors`. – Steve Jun 27 '16 at 12:05
  • Why aren't you putting any custom js code in a file, and then enqueue it? That's the right way to do it... – dingo_d Jun 27 '16 at 12:26
  • Beautiful. That worked. Thank you Dingo D. Does enqueuing the script ensure there are no jQuery conflicts? – Steve Jun 27 '16 at 15:53
  • Well by enqueuing you can ensure that all the necessary dependencies are loaded, so you are minimizing the chance for errors. Not sure about conflicts tho. – dingo_d Jun 27 '16 at 15:54
  • I see. Thanks for your help. – Steve Jun 27 '16 at 15:55
  • No problem. Happy to help :) – dingo_d Jun 27 '16 at 15:56