如何使用缓动效果滚动页面？(how to scroll my page with easing effect?)

如何使用缓动效果滚动页面？我希望当我点击菜单然后通过滚动缓动效果调用其ID部分

<body data-spy="scroll" data-target="#myNavbar" data-offset="0"> <nav id="myNavbar" class="navbar navbar-default" role="navigation"> <div class="container"> <h1 class="navbar-brand align" href="#">ashish</h1>  <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#homesection">Home</a></li> <li><a href="#ourServices">What i do?</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav>

谢谢你提前帮助我

how to scroll my page with easing effect? i want when i will click on menu then its id section call by scrolling with easing effect

<body data-spy="scroll" data-target="#myNavbar" data-offset="0"> <nav id="myNavbar" class="navbar navbar-default" role="navigation"> <div class="container"> <h1 class="navbar-brand align" href="#">ashish</h1>  <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#homesection">Home</a></li> <li><a href="#ourServices">What i do?</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav>

thanks in advance plz help me

最满意答案

喜欢这个：

<a href="#Portfolio" onClick="scrollTo('Portfolio', event)">Portfolio</a>

部分：

JS：

function scrollTo(element, event) { event.preventDefault(); event.stopPropagation(); $('html, body').animate({ 'scrollTop' : $('#' + element).offset().top + 'px' }, 1000); }

你需要jQuery。

干杯

Like this:

<a href="#Portfolio" onClick="scrollTo('Portfolio', event)">Portfolio</a>

Section:

JS:

function scrollTo(element, event) { event.preventDefault(); event.stopPropagation(); $('html, body').animate({ 'scrollTop' : $('#' + element).offset().top + 'px' }, 1000); }

You will need jQuery for this.

Cheers

更多推荐