加载新页面后平滑滚动到锚点 [英] Smooth scroll to anchor after loading new page

查看：20
本文介绍了加载新页面后平滑滚动到锚点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我是 Javascript 的完全新手.

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

非常感谢！

解决方案

由于浏览器会自动检测 hash 并带您到那个位置...
我突然想到您可以先将滚动位置重置为 0，然后进行平滑滚动.

类似……

//立即到顶部if ( window.location.hash ) scroll(0,0);//取消一些浏览器问题setTimeout( function() { scroll(0,0); }, 1);$(函数(){//你当前的点击函数$('.scroll').on('click', function(e) {e.preventDefault();$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top + 'px'}, 1000, '摇摆');});//*仅当我们在 url 上有锚点时如果(window.location.hash){//平滑滚动到锚点 id$('html, body').animate({scrollTop: $(window.location.hash).offset().top + 'px'}, 1000, '摇摆');}});

Edit:将 scroll(0,0) 移到 $(function(){...}) 之外； 防止闪烁.
此外，还添加了带有工作示例的代码段.
全屏观看效果最佳 

 html, body {边距:0；填充:0；}.隐藏代码{显示:无；可见性:隐藏；不透明度:0；}.header {背景颜色:#ccc；填充:5px；}.header li {填充:5px；边距:5px；显示:内联块；}. 文章 >div {边框:1px 实心；边距:10px；填充:250px 50px；背景颜色:#ccc；}div:之前{内容: attr(id);}.页脚{文本对齐:居中；}

 
<ul><li>页眉标题/导航栏</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>
<div class="容器"><div class="内容"><div class="文章"><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 class="footer">公司&copy;2015

<div class="隐藏代码"><script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">//立即到顶部if ( window.location.hash ) scroll(0,0);//取消一些浏览器问题setTimeout( function() { scroll(0,0); }, 1);//任意位置$(函数(){//你当前的点击函数$('.scroll').on('click', function(e) {e.preventDefault();$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top + 'px'}, 1000, '摇摆');});//*仅当我们在 url 上有锚点时如果(window.location.hash){//平滑滚动到锚点 id$('html, body').animate({scrollTop: $(window.location.hash).offset().top + 'px'}, 1000, '摇摆');}});

I want to navigate to an anchor point on a new page, but I want the page to load at the top then immediately smooth scroll to the relevant anchor point. Can this be done?

I am a complete newbie with Javascript.

This is the js I currently use for smooth scrolling within the current page. I just apply a class of 'scroll' on the link.

Thanks very much!

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

解决方案

As browsers automatically detect the hash and take you to that position...
It occurs to me that you could first reset the scroll position to 0 and then made the smooth scrolling.

Something like...

// 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'
        }, 1000, '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'
        }, 1000, 'swing');
    }

});

Edit: Move the scroll(0,0)outside $(function(){...}); to prevent flickering.
Also, Snippet with working example was added.
The effect is best appreciated when viewed in full screen 

        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,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'
                    }, 1000, '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'
                    }, 1000, 'swing');
                }
            });
        </script>

    </div>

这篇关于加载新页面后平滑滚动到锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆