一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery平滑滚动页面到某个锚点程序

时间:2013-05-22 编辑:简简单单 来源:一聚教程网

返回到顶部

 代码如下 复制代码

$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() >= 100) {
  $('#go-top').fadeIn(300);
  } else {
   $('#go-top').fadeOut(300);
  }
  });
  $('#go-top').click(function() {
  $('html,body').animate( {
   scrollTop : '0px'
   }, 0);
 });
});

html 代码

javascript:void(0);" class="go-top" style="text-decoration: none; display: block;" id="go-top">

上面好像只能返回顶部,不能返回到指定锚点哦,搜索到一个js的解决办法


javascript:

 代码如下 复制代码

调用方法:

scroller(el, duration)

el : 目标锚点 ID
duration : 持续时间,以毫秒为单位,越小越快

好是好用但是感觉代码太长了,再搜索找到一个jquery超简单的滚动页面到某个锚点代码了

 代码如下 复制代码

$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

热门栏目