smooth scroll to name

0
votes

I have seen some standard code for smooth scroll to a href with # but I am doing a link to anchor by way of name attribute. So the code would be like this:

<li>
    <a href="#on-water">On Water</a>
  </li>

goes to the section:

<a class="mwm-aal-item" name="on-water"></a>

It is a plugin called Better Anchor Links for wordpress, that is why it is set up that way.

2
jquerywordpress
And what is the question? - mplungjan

2 Answers

1
votes

DEMO HERE

$(document).ready(function(){
    $('li > a').on('click', function(){
        $('html,body').animate({scrollTop : $('.mwm-aal-item').offset().top},3000);
    });
});

the previous example if you run the code for a specific anchor .. -

but if you want to run that with all anchors use this DEMO HERE

$(document).ready(function(){
        $('li > a').on('click', function(){
            var GetaName = $(this).attr('href').split('#');
            $('html,body').animate({scrollTop : $('a[name ='+GetaName[1]+']').offset().top},1000);
        });
    });
0
votes

If I understood correctly - you would like to achieve this:

http://jsfiddle.net/ywt5a6dn/

$(document).ready(function() {  
    $('a[href^="#"]').click(function() {  
        var target = $(this.hash);  
        if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');  
        if (target.length == 0) target = $('html');  
        $('html, body').animate({ scrollTop: target.offset().top }, 700);  
        return false;  
    });  
});