Smooth scrolling when clicking an anchor link (not working)

Question

I've had a look at the answers to this question, and they're not working.

I believe this is because our site navigation prefixes anchor links with the domain, to ensure the correct page with the anchor tag is loaded (as the links are in the global navigation).

i.e, instead of having links like <a href="#anchor">link</a>, we have links like <a href="http://example.com/#anchor">link</a>

How can the answers to the above question be altered to work when the anchor link is prefixed with a domain?

Help appreciated.

Update:

From Amal's answer, I have added:

<script>
    jQuery(document).on("click",".consult-header .consult-primary-menu li a",function(event){
      event.preventDefault();
      var thishref =jQuery(this).attr("href");
      var url = thishref.substr(thishref.indexOf("#"));
      jQuery('html, body').animate({
                  scrollTop: $(url).offset().top
      }, 2000);
    });
</script>

The links to anchors inside the home page work, but the links to internal sub pages do not work - clicking these links does nothing, even though the status bar indicates a link is detected.

Same question? http://stackoverflow.com/questions/39410462/jquery-smooth-scroll-full-url-including-id — texelate, May 10 '17 at 05:52

Amal · Accepted Answer · 2017-05-18T06:21:08.723

2

Try this code

$(document).on("click",".consult-header .consult-primary-menu li a",function(event){
    var thishref =$(this).attr("href");
    var url = thishref.substr(thishref.indexOf("#"));
    if(url.length>1){
        event.preventDefault();
        $('html, body').animate({
                  scrollTop: $(url).offset().top
        }, 2000);
    }
});

DEMO

edited May 18 '17 at 06:21

answered May 10 '17 at 05:55

Amal

3,398
1
12
20

Thanks Amal. Tried that [here](http://test.doig.com.au/regal/) with the white navigation links at the top, but animation does not work. – Steve May 10 '17 at 06:30
@Steve pls see this http://plnkr.co/edit/1uBKbwDcieJwvaKobTit?p=preview I just add your code it works perfectly for me – Amal May 10 '17 at 07:45
Can you see why it is not working [here](http://test.doig.com.au/regal/)? – Steve May 11 '17 at 07:45
@Steve please change on click event from "jQuery(document).on("click",".product-list a",function(event){"to "jQuery(document).on("click",".consult-header .consult-primary-menu li a",function(event){" . I think this cause the problem – Amal May 11 '17 at 07:59
Can you alter your answer please Amal? It is hard to see the code properly in comments. Thanks. – Steve May 11 '17 at 08:06
Sure.In your anchor click event,you had mistakenly written class as "".product-list a"" change it to yours.Hope its clear..:) – Amal May 11 '17 at 08:16
Just replace anchor click event from `jQuery(document).on("click",".product-list a",function(event){` to `jQuery(document).on("click",".consult-header .consult-primary-menu li a",function(event){` .It works fine when i changed this – Amal May 11 '17 at 09:18
Thanks Amal, working in a production environment now. – Steve May 12 '17 at 03:20
Cheers Bro...:) – Amal May 12 '17 at 04:08
Hi Amal, I think this jQuery script applies itself to *all* links, so that now, the desired behaviour occurs for links to anchor points in the home page for navigation items, but navigation items to other pages do not work. If you hover over these links to the other pages, the link is detected in the status bar, but clicking does nothing. i.e. clicking only works for links to anchor points, not to other pages. – Steve May 16 '17 at 05:48
Hi @Steve,if i understood you correctly you need to get smooth scroll on other pages also while clicking from home page to other.Is thst working in production. – Amal May 16 '17 at 06:00
The smooth scroll should only apply to the anchor links when the current page is the home page. When the user is on the home page, the links to other pages must work as normal, when the user is on any other page all links to work normally please. – Steve May 16 '17 at 06:07
see this http://plnkr.co/edit/kgVPNa0HIwplDCETPrzs?p=preview updated code.smooth scroll will only work if anchor link has `#`.rest will be redirected to respective pages. – Amal May 16 '17 at 06:45
Thanks Amal. @ http://plnkr.co/edit/kgVPNa0HIwplDCETPrzs?p=preview if I click the `Wealth Management` or `Capital Raising` nothing happens. Those links need to take the user to those pages. – Steve May 17 '17 at 02:24
sorry Steve,i missed it.updated code,see this http://plnkr.co/edit/kgVPNa0HIwplDCETPrzs?p=preview – Amal May 17 '17 at 04:02
Thanks Amal. The smooth scroll is now missing. :-) – Steve May 18 '17 at 00:47
Where is smooth scroll is now missing,sorry I didn't get it – Amal May 18 '17 at 03:23
Oh. It is working now on your plknr, but I can't get it working on my [test site](http://test.doig.com.au/regal/) - can you see what is wrong there? Please ignore the missing resources on that page (they shouldn't affect the issue), I downloaded the production site which is in maintenance mode, and uploaded it to a test server. – Steve May 18 '17 at 03:41
same issue again,just replace anchor click event from `jQuery(document).on("click",".product-list a",function(event){` to `jQuery(document).on("click",".consult-header .consult-primary-menu li a",function(event){` – Amal May 18 '17 at 03:46
If I comment out `event.preventDefault();` your solution works. – Steve May 18 '17 at 06:14
`jQuery(document).on("click",".consult-header .consult-primary-menu li a",function(event){ var thishref =jQuery(this).attr("href"); var url = thishref.substr(thishref.indexOf("#")); if(url.length>1){ event.preventDefault(); jQuery('html, body').animate({ scrollTop: jQuery(url).offset().top }, 2000); } });` Can you replace your full code with this.Does this works? – Amal May 18 '17 at 06:15
Thx. Fixed Amal. You might want to update your answer for future visitors. – Steve May 18 '17 at 06:17

score 0 · Answer 2 · answered May 10 '17 at 06:02

<script type="text/javascript">
    jQuery(function($) {
        // Smooth scrolling
        $('a[href*="#"]:not([href="#"])').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) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
        // Close mobile menu on click
        $('.wsite-menu-item').on('click', function() {
            $(".hamburger").trigger('click');
        });
        // Smooth scroll to top when "Home" is clicked
        $("a[href='http://tester118172.weebly.com/#E']").click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, "slow");
            return false;
        });
    });
</script>

In Html Page:

<div class="main-wrap">
    <div class="container">
        <div class="anchor"><h2><a name="A" class="anchor-link">{anchor-link-1:text}</a></h2></div>
        <div class="anchor-content">{anchor-content-1:content}</div>
    </div>
</div>

<div class="main-wrap">
    <div class="container">
        <div class="anchor"><h2><a name="B" class="anchor-link">{anchor-link-2:text}</a></h2></div>
        <div class="anchor-content">{anchor-content-2:content}</div>
    </div>
</div>

<div class="main-wrap">
    {{#sections}}
        <div class="container">{content}</div>
    {{/sections}}
</div>

<div class="main-wrap">
    <div class="container">
        <div class="anchor"><h2><a name="C" class="anchor-link">{anchor-link-3:text}</a></h2></div>
        <div class="anchor-content">{anchor-content-3:content}</div>
    </div>
</div>

<div class="main-wrap">
    <div class="container">
        <div class="anchor"><h2><a name="D" class="anchor-link">{anchor-link-4:text}</a></h2></div>
        <div class="anchor-content">{anchor-content-4:content}</div>
    </div>
</div>

You can Use This code to solve this problem ,but This code is example, You can edit on this code So suits your Work.

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

Too much code uptheir for simple effect.
You are missing the whole point.
Scrolling is not domain based !
You should simply have an anchor that points to a section in your page.
Since I've already give an answear to that, you can check the link.
Hope this helps, SYA.

edited May 23 '17 at 12:10

Community

1
1

answered May 10 '17 at 07:21

LebCit

618
4
13

Smooth scrolling when clicking an anchor link (not working)

3 Answers3