Question

我已经查看了this question的答案，但他们没有工作。

我认为这是因为我们的网站导航会为域名添加锚点链接，以确保加载带有锚标记的正确页面（因为链接位于全局导航中）。

，而不是像j + 1这样的链接，我们有像<a href="#anchor">link</a>

这样的链接

当锚链接以域为前缀时，如何更改上述问题的答案？

帮助表示赞赏。

更新

从Amal的回答中，我补充道：

<a href="http://example.com/#anchor">link</a>

主页内部锚点的链接有效，但内部子页面的链接不起作用 - 即使状态栏指示检测到链接，单击这些链接也不起作用。

Answer 1

试用此代码

$(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

Answer 2

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

在Html页面中：

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

您可以使用此代码来解决此问题，但此代码是示例，您可以编辑此代码以适合您的工作。

Answer 3

为了简单的效果，他们的代码太多了你错过了重点。
滚动不是基于域的！
您应该只有一个指向页面中某个部分的锚点由于我已经给了你一件衣服，你可以查看the link 希望这有帮助，SYA。

单击锚链接时的平滑滚动（不工作）

3 个答案: