Question

问题背景：

我在ASP.NET MVC项目中使用Twitter Bootstrap 3开发单页网站。

问题：

我目前正在尝试实现平滑滚动＆＃39;应该从导航栏下拉菜单中滚动到相关的div。在从导航栏下拉某个部分时，它会跳过“跳跃”状态。到div而不是滚动。

代码：

以下是我的＆＃39; _Layout.cshtml＆＃39;标记用于提供导航栏和页脚。滚动的JavaScript显示在脚本标记之间：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
    <script>
        $('#nav .navbar-nav li>a').click(function () {
            var link = $(this).attr('href');
            var offSet = 30;
            var targetOffset = $(link).offset().top - offSet;
            $('html,body').animate({ scrollTop: targetOffset }, 7000);
        });
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">

    <nav class="navbar navbar-default" role="navigation" id="nav">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 src="images/logo.png" alt="yourLogo"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#myCarousel">Projects</a></li>
                            <li><a href="#Welcome">Welcome</a></li>
                            <li><a href="#features">Thing</a></li>
                            <li><a href="#About">About Me</a></li>
                            <li><a href="#Location">Location</a></li>
                            <li><a href="#Contact">Contact Me</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<div class="container body-content">
    @RenderBody()
</div>

<footer>
    <!-- This HTML is outside the other container above i.e its separate. You need a container as this allows you to use bootstrap classes -->
    <div class="container">
        <div class="row">
            <div class="col-sm-2">
                <h6>Copyright &copy; 2014</h6>
            </div>

            <div class="col-sm-4">
                <h6>About Us</h6>
                <p>Chia dreamcatcher artisan vinyl Intelligentsia Banksy. Art party whatever cred wolf hella distillery Portland wayfarers Kickstarter, kale chips pug artisan +1 crucifix.</p>
            </div>

            <div class="col-sm-2">
                <h6>Navigation</h6>
                <ul class="unstyled">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

            <div class="col-sm-2">
                <h6>Follow Us</h6>
                <ul class="unstyled">
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Google Plus</a></li>
                </ul>
            </div><!-- end col-sm-2 -->

            <div class="col-sm-2">
                <h6>Coded with<span class="glyphicon glyphicon-heart"> by Me</span></h6>


            </div>
        </div>
    </div>
</footer>
</body>


@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

截图：

以下屏幕截图显示，当点击导航栏选项时，页面会转到正确的div，但不会滚动。解决这个问题的任何帮助都会很棒。

enter image description here

Answer 1

经过一番研究并使用这个很好的例子：http://alijafarian.com/responsive-page-scrolling-with-jquery-and-bootstrap/我成功地制作了以下完美无缺的解决方案。

 <script>

    $(document).ready(function() {
        $('#nav .navbar-nav li>a').on('click', function(event){
            event.preventDefault();
            var sectionID = $(this).attr("href");
            scrollToID(sectionID, 750);
        });

        function scrollToID(id, speed)
        {
            var offSet = 70;
            var targetOffset = $(id).offset().top - offSet;
            $('html,body').animate({scrollTop:targetOffset}, speed);
        }
        });
 </script>

Answer 2

尝试将“px”添加到scrolltop：

$('#nav .navbar-nav li>a').click(function () {
        var link = $(this).attr('href');
        var offSet = 30;
        var targetOffset = $(link).offset().top - offSet;
        $('html,body').animate({ scrollTop: targetOffset + "px" }, 7000);
    });

或者这个：

$('#nav .navbar-nav li>a').click(function () {
        var link = $(this).attr('href');
        var offSet = 30;
        var targetOffset = $(link).offset().top - offSet;
        $('html,body').animate({ scrollTop: targetOffset }, 'slow');
    });

我认为您需要在加载页面后执行它：

$(document).ready(function () {
    $('#nav .navbar-nav li>a').click(function () {
        var link = $(this).attr('href');
        var offSet = 30;
        var targetOffset = $(link).offset().top - offSet;
        $('html,body').animate({ scrollTop: targetOffset }, 'slow');
    });
});

Answer 3

    <script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

取自：[http://css-tricks.com/snippets/jquery/smooth-scrolling/]

JavaScript'平滑滚动'不会滚动

3 个答案: