jquery – 加载新页面后平滑滚动到锚点

我想导航到新页面上的锚点,但是我希望页面加载到顶部,然后立即滚动到相关的锚点.这可以做吗

我是一个完整的新手与Javascript.

这是我当前用于在当前页面内平滑滚动的js.
我只是在链接上应用一个“滚动”类.

非常感谢！

<script>
$(function(){
  $('.scroll').on('click',function(e) {
    e.preventDefault();
    $('html,body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' },1000,'swing');
  });
});
</script>

解决方法

随着浏览器自动检测哈希并带你到这个位置…
在我看来,您可以先将滚动位置重置为0,然后再进行平滑滚动.

就像是…

// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); },1);

$(function() {

    // your current click function
    $('.scroll').on('click',function(e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: $($(this).attr('href')).offset().top + 'px'
        },'swing');
    });

    // *only* if we have anchor on the url
    if(window.location.hash) {

        // smooth scroll to the anchor id
        $('html,body').animate({
            scrollTop: $(window.location.hash).offset().top + 'px'
        },'swing');
    }

});

编辑：移动滚动(0,0)外$(function(){…});以防止闪烁.
此外,添加了具有工作示例的代码段.
当全屏观看时,效果最好

html,body {
            margin: 0;
            padding: 0;
        }
        .hidden-code {
            display: none;
            visibility: hidden;
            opacity: 0;
        }
        .header {
            background-color: #ccc;
            padding: 5px;
        }
        .header li {
            padding: 5px;
            margin: 5px;
            display: inline-block;
        }
        .articles > div {
            border: 1px solid;
            margin: 10px;
            padding: 250px 50px;
            background-color: #ccc;
        }
        div:before {
            content: attr(id);
        }
        .footer {
            text-align: center;
        }

<div class="header">
        <ul>
            <li>page header title/navbar</li>
            <li><a class="scroll" href="#text-1">#text-1</a></li>
            <li><a class="scroll" href="#text-2">#text-2</a></li>
            <li><a class="scroll" href="#text-3">#text-3</a></li>
            <li><a class="scroll" href="#text-4">#text-4</a></li>
            <li><a class="scroll" href="#text-5">#text-5</a></li>
            <li><a class="scroll" href="#text-6">#text-6</a></li>
            <li><a class="scroll" href="#text-7">#text-7</a></li>
            <li><a class="scroll" href="#text-8">#text-8</a></li>
        </ul>
    </div>

    <div class="container">

        <div class="content">

            <div class="articles">
                <div id="text-1"></div>
                <div id="text-2"></div>
                <div id="text-3"></div>
                <div id="text-4"></div>
                <div id="text-5"></div>
                <div id="text-6"></div>
                <div id="text-7"></div>
                <div id="text-8"></div>
            </div>

        </div>

        <div class="footer">company &copy; 2015</div>

    </div>

    <div class="hidden-code">

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">

            // to top right away
            if ( window.location.hash ) scroll(0,0);
            // void some browsers issue
            setTimeout( function() { scroll(0,1);

            // any position
            $(function() {
                // your current click function
                $('.scroll').on('click',function(e) {
                    e.preventDefault();
                    $('html,body').animate({
                        scrollTop: $($(this).attr('href')).offset().top + 'px'
                    },'swing');
                });
                // *only* if we have anchor on the url
                if(window.location.hash) {
                    // smooth scroll to the anchor id
                    $('html,body').animate({
                        scrollTop: $(window.location.hash).offset().top + 'px'
                    },'swing');
                }
            });
        </script>

    </div>

jquery – 加载新页面后平滑滚动到锚点

解决方法

猜你在找的jQuery相关文章