【问题标题】:How do I shift the page-scroll for each html section to jump to the top of each section upon clicking its corresponding link in the navbar?单击导航栏中的相应链接后,如何移动每个 html 部分的页面滚动以跳转到每个部分的顶部?
【发布时间】:2016-03-23 23:53:27
【问题描述】:

我的页面滚动有问题。当我单击导航栏中的链接时,它应该跳转到该部分的顶部。但是,当我单击链接时,它会跳转到部分的中间部分。有没有办法以任何方式移动页面滚动来纠正这个问题。这是我在代码笔上的代码的链接http://codepen.io/perrylivingston/pen/KzadPW?editors=1010

<nav class="navbar-collapse navbar-inverse navbar-collapse-1 navbar-fixed-top" role="navigation">

切换导航

  • 首页
  • 关于
  • 投资组合
  • 联系方式
  • 【问题讨论】:

    • 您可以将每个部分的高度设为 100 个视口高度。 height:100vh
    • @KalpeshSingh 尝试了 vh 和 % 但没有运气。

    标签: jquery html css


    【解决方案1】:

    这应该可以完成这项工作,并确保在底部页面中包含 js/jquery.easing.min.js 文件

    CSS,编辑

    .barrier {
      top: 80px;
      position: relative;
      width: 100vw;
    }
    
    #headline {
      color: #FFFFFF;
    }
    

    JS,添加

    //jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
    });
    
    //jQuery for page scrolling feature - requires jQuery Easing plugin
    $(function() {
        $('a.page-scroll').bind('click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top-80
            }, 1000, 'easeInOutExpo');
            event.preventDefault();
        });
    });
    

    HTML,编辑:将所有部分放入.barrier

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a class="page-scroll" href="#home">Home</a></li>
            <li><a class="page-scroll" href="#about">About</a></li>
            <li><a class="page-scroll" href="#portfolio">Portfolio</a></li>
            <li><a class="page-scroll" href="#contact">Contact</a></li>
        </ul>
    </div>
    

    【讨论】:

      猜你喜欢
      • 2019-08-06
      • 1970-01-01
      • 2022-12-09
      • 1970-01-01
      • 2016-05-24
      • 1970-01-01
      • 2022-07-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多