Question

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

    <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>时，无论他/她滚动屏幕，用户都会被带到页面顶部。

我怎样才能做到这一点？

Answer 1

试试这个

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

单击图像后，我们将动画显示在页面顶部。

Answer 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>

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

2 个答案: