Question

A有相对链接/info/here#point-reach。当我点击它的链接时，它会转到page / info / here并同时进入#point-reach锚点。是否可以从其他页面转到此/info/here#point-reach链接并顺利地从顶部转到此锚点？代码我正在尝试使用：

$(document).ready( function(){            
    var getLink = window.location.hash
    setTimeout(function(){               
        $("html, body").animate({ scrollTop: $(getLink).offset().top }, 1000);
    }, 1000);
})


<a id="package-5-view"></a>
                <input type="radio" id="package-5" class="accordion-section" hidden="">
                    <div class="section dark package-description">
                        <div class="animated-content">
                            <div class="wrapper fbox jc-sb">
                                <div class="two-five">
                                    <p style="margin-bottom: 40px">Lorem ipsum dolor sit amet, in vix inermis principes, vis soluta definiebas no. Sea cu laboramus comprehensam, homero ullamcorper vis te. Eam id insolens antiopam, pri an nihil libris facilisis. Perpetua efficiantur per ne. Ne per simul tritani offendit, eu quo atqui virtute deserunt.
                                        <ul class="list-style">
                                            <li>Швидкі результати тесту</li>
                                            <li>Зручне, просте і швидке проходоження тесту</li>
                                            <li>Приємна ціна!</li>
                                        </ul>
                                </div>

Answer 1

此脚本应添加到每个页面的头部或放入js文件中，并将该文件包含在头部/正文中，并且不需要setTimeout()方法，因为在dom准备好之后等待一秒但是页面跳转链接并且平滑滚动效果不会显示：

// file.js <---include this file at a common place which is available for all pages.
$(document).ready( function(){            
    var getLink = window.location.hash;
    if(getLink){
       $("html, body").animate({ scrollTop: $(getLink).offset().top }, 1000);
    }
})

这将确保我们在url中有一个哈希值，并且document.ready块确保我们有我们的元素可以处理。因此，我们的想法是创建一个可以为每个html文件添加的常见js文件，或者说不同的URL ，如果url包含任何哈希值，它将为此运行。

Answer 2

If we pass Div id which is available in page then directly it will go on that div id.
To avoid this just pass some special character in hash

eg. Just add !(or any symbol) after hash so i will be work fine.
/info/here#!point-reach

$(document).ready( function(){            
        var getLink = document.location.hash.substr(1);
         if(getLink.indexOf("!") != -1){
                var rel = hash.replace("!","");                
            setTimeout(function(){      
              $('html, body').animate({
                scrollTop: $('#'+rel).offset().top
            }, 1000);
         }, 1000);`enter code here`
        }
})

Answer 3

我没有使用document.ready，而是使用了window.load。所以我们在窗口顶部的第一个动作，然后延迟我们到达我们的锚点。所以这里是帮助的代码（永远不要添加其他代码）：

$(window).load(function() {
       $(this).scrollTop(0)
        var getLink = window.location.hash;
        if(getLink){
            $(getLink).next().prop('checked', 'checked')
            setTimeout(function(){
                $("html, body").animate({ scrollTop: $(getLink).offset().top }, 1000);
            }, 1000);
        }
    });

相对链接并在加载时平滑滚动到它

3 个答案: