简体   繁体   中英

Smooth scrolling when clicking an anchor link (not working)

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).

ie, 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.

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

<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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM