当Div id刚刚从display:none显示到display:block时滚动页面id

Scrolling page id when Div id is just displayed from display:none to display:block

本文关键字：display id 滚动 block none Div 显示      更新时间：2023-09-26

我有一个html页面的登录和主页。我有一个用户登录的条件。例如，当他/她使用临时密码登录时，重定向页面的url将为home.html?change=yes#focuschange。然后在我的主页上，当url change=="yes"时，它将隐藏其他div id（主页包装器）。然后显示focuschangediv id。应该滚动到所述div id。但在加载主页时，它只是隐藏其他div并显示focuschangediv，而不是滚动到它。它只是显示在底部。当我重新加载页面时，它将按照我的意愿滚动。为什么？我尝试使用scrollIntoView()和animate scrollTop，但问题相同。

我的html的结构是这样的：

<div class="page-content">
    <div class="content-block">
        <div id="home-wrapper"></div> //this will hide upon page load (by default it will show)
        <div id="profile-wrapper"> // this will show upon page load (by default it will hide)
            <div id="info"></div>
            <div id="focuschange">
               <form></form>
            </div>
        </div>
    </div>
</div>

这是我在主页中的jquery函数：

function GetURLParameter(sParam){
                var sPageURL = window.location.search.substring(1);
                var sURLVariables = sPageURL.split('&');
                for (var i = 0; i < sURLVariables.length; i++)
                {
                    var sParameterName = sURLVariables[i].split('=');
                    if (sParameterName[0] == sParam)
                    {
                        return sParameterName[1];
                    }
                }
            }
            var urlvar = GetURLParameter('change');
            if (urlvar == 'yes'){
                $('#home-wrapper').hide();
                $('#profile-wrapper').show();
                setTimeout(function(){
                $("#newpass").focus();   
                }, 200);
            }

当加载页面时显示div id时，是否存在滚动div id的问题？

在这种情况下应该采取什么方法？

您可能需要更改您的行，即；

var urlvar = GetURLParameter('changepassword');

至

var urlvar = GetURLParameter('change');

由于您已经在使用jquery，因此可以使用jquery来执行滚动。

这里有一个css-tricks链接，它可以在点击链接时自动执行。https://css-tricks.com/snippets/jquery/smooth-scrolling/

如果你所需要的只是在页面加载时发生这种情况，那么你可以这样做：

$('html, body').animate({
  scrollTop: $('#focuschange').offset().top
}, 1000);
相关文章：