使用固定导航栏滚动到页面顶部答案

【问题标题】：Scroll to top of page using fixed nav bar使用固定导航栏滚动到页面顶部
【发布时间】：2017-07-17 13:12:34
【问题描述】：

我在引导程序中使用这样的固定顶部导航栏：

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <nav class="navbar navbar-fixed-top" style="background:white;">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img alt="Brand" src="someimage" style="height:28px"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a target="_blank" href="somelink"><i class="fa fa-twitter fa-lg  custom-icon"></i></a></li>
                    <li><a target="_blank" href="somelink"><i class="fa fa-linkedin fa-lg  custom-icon"></i></a></li>
                    <li>
                        <a target="_blank" href="somelink"><i class="fa fa-facebook fa-lg custom-icon"></i></a>
                    </li>
                    <li><a target="_blank" href="somelink"><i class="fa fa-medium fa-lg custom-icon"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

我想要这样的行为，即当用户点击品牌形象<a class="navbar-brand" href="#"><img alt="Brand" src="logoimage" style="height:28px"></a> 时，无论他/她向下滚动屏幕，用户都会被带到页面顶部。

我怎样才能做到这一点？

【问题讨论】：

标签： jquery html css twitter-bootstrap navbar

【解决方案1】：

试试这个

$('.navbar-brand img').click(function(){
  $('body, html').animate({scrollTop: 0}, 1000);
});

当点击图片时，我们将动画到页面顶部。

【讨论】：

【解决方案2】：

它已经在工作了，因为你使用了 scroll-spy 来滚动顶部—— 向下滚动并点击品牌形象。

工作正常

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
            <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" style="height: 2000px;">
    <nav class="navbar navbar-fixed-top" style="background:white;">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img alt="Brand" src="someimage" style="height:28px"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a target="_blank" href="somelink"><i class="fa fa-twitter fa-lg  custom-icon"></i></a></li>
                    <li><a target="_blank" href="somelink"><i class="fa fa-linkedin fa-lg  custom-icon"></i></a></li>
                    <li>
                        <a target="_blank" href="somelink"><i class="fa fa-facebook fa-lg custom-icon"></i></a>
                    </li>
                    <li><a target="_blank" href="somelink"><i class="fa fa-medium fa-lg custom-icon"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>
  </html>

【讨论】：