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

Question

A有相对链接/info/here#point-reach。当我点击它的链接时，它会转到页面/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文件中，并将该文件包含在head/body中，而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块中有一个散列，就可以确保我们有要处理的元素。所以，我们的想法是创建一个通用的js文件，它可以为每个html文件添加，或者说是不同的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

我使用的是window.load，而不是document.ready。所以我们在窗口顶部的第一个动作，然后随着延迟，我们到达了我们的锚。因此，下面的代码起到了帮助作用(别管其他代码的添加)：

$(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);
        }
    });