jQuery平滑滚动到新页面链接

时间:2015-01-21 04:51:41

标签: javascript jquery html

平滑滚动适用于同一页面。但是我希望在点击时平滑滚动以适用于其他页面。例如, 当我从主页点击服务链接时,我需要转到该服务页面并顺利滚动到该div标签。你可以帮我吗?

HTML代码

        <ul class="secondmenu">
            <li><a href="Home.html#main1">Home</a></li>
            <li><a href="about.html#main2">About</a></li>
            <li><a href="services.html#templatemo_main">Technology</a></li>
            <li><a href="about.html#templatemo_main">Team</a></li>
        </ul>

Jquery的

jQuery('.secondmenu a').click(function (e) {
e.preventDefault();
var target = this.hash;
if (this.href != '#') {
    jQuery('html, body').animate({
        scrollTop: jQuery(target).offset().top - 60
    }, 1000);
} });

1 个答案:

答案 0 :(得分:1)

由于您必须在页面加载时转到相应的部分,因此您应该在ready函数内编写脚本。

<script>
      $( document ).ready(function(e) {
        var target = window.location.hash; //The hash property sets or returns the anchor part of a URL, including the hash sign
        if (typeof target != "undefined") { //Checks if the variable is undefined incase no hash property exists
            $('html, body').animate({
                scrollTop: $(target).offset().top - 60
            }, 1000);
           e.preventDefault(); 
        }
    });
</script>

希望能帮助你交配.. :)