单击菜单活动项时标题滚动到顶部

Posted 2023-03-12

【中文标题】单击菜单活动项时标题滚动到顶部

【英文标题】：Header scrolls to top when click menu active item

【发布时间】：2018-03-08 03:57:48

【问题描述】：

我有一个粘性标题，我使用 css 和 javascript 设置。以及标题中的大型菜单。问题是，当您滑到底部时，然后单击下拉菜单的更多链接，它会滚动回顶部。我被这件事难住了。这是我的标题和大型菜单的 javascript。这是受影响的代码。就像我说的那样，除了当我单击更多链接时它会滚动到顶部之外，它功能正常。

为了方便起见，因为我不能只发布整个索引，所以这里是链接。正如我之前所说，这是javascript的问题。

http://beta.mstsage.com/sage-theme/

$(window).scroll(function()     
    var scroll = $(window).scrollTop();

    if (scroll >= 100) 
        $(".header-container").addClass("small");
     else 
        $(".header-container").removeClass("small");
    
);

$('.more').click(function()
   $(this).toggleClass('active');
    $('.slide-down').toggle();
);

<div id="header-container" class="container-fluid header-container">

    //** Nav Menu
    <div class="row">
        <div class="col-12">
            <ul class="quick-links">
                <li class="quick-link">
                    <a href="#" class="link">News</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Videos</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Reviews</a>
                </li>
                <li class="quick-link">
                    <a href="#" class="link">Wikis</a>
                </li>
                <li class="quick-link more">
                    <a href="#" class="link">More
                        <i class="fa fa-caret-down"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="mega-menu-container more-container slide-down">
    <div class="row no-gutters more-menu row-padding slide" style="height: 390px">
        <div class="col-12">
            <div class="row menu-content main-menu">
                <div class="col-6 menu-side left">
                    <h1 class="more-menu-label">MstSage Entertainment</h1>
                    <div class="row no-gutters cols-nav">
                        <div class="col-6">
                            <ul class="col-nav">
                                <li class="col-nav-link"><a href="#" class="link">About Us</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Accessibility</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Advertise</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Careers</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Content Team</a></li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Press Release</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Privacy Policy</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Site Map</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Standards</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Terms of Use</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col menu-side right">
                    <div class="row cols-nav">
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Social</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Podcasts</a></li>
                                <li class="col-nav-link"><a href="#" class="link">YouTube</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Facebook</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Twitter</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Twitch</a></li>
                            </ul>
                        </div>
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Entertainment</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">Movies</a></li>
                                <li class="col-nav-link"><a href="#" class="link">TV Shows</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Comics</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Tech</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Trailers</a></li>
                            </ul>
                        </div>
                        <div class="col-4">
                            <h1 class="text-center more-menu-label">Games</h1>
                            <ul class="align-items-center col-nav">
                                <li class="col-nav-link"><a href="#" class="link">PlayStation</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Xbox</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Nintendo</a></li>
                                <li class="col-nav-link"><a href="#" class="link">PC</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Mobile</a></li>
                                <li class="col-nav-link"><a href="#" class="link">Upcoming</a></li>
                                <li class="col-nav-link"><a href="#" class="link">eSports</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="menu-content legal"><span class="legal-text">©2006-2018 MstSage Entertainment</span></div>
        </div>
    </div>
</div>

【问题讨论】：

请始终添加所有相关代码（html、CSS）。

@ScottMarcus 我发布了导航和部分标题，这是我在站点中除了 bootstrap 4s 默认脚本之外的唯一 javascript。

这是你给我们的：jsfiddle.net/fLqwjmu4

我已添加到页面的链接。

【参考方案1】：

它跳到顶部的原因是因为您将<a> 的href 设置为#，这是它应该做的。尝试用href="javascript:void(0) 替换href="#"，它应该可以按照您的预期工作。 :)

【讨论】：

太棒了！如果你能接受我的回答，那就太好了。 :)

没问题，我就是这么做的。