sass.hk页面的这种滚动效果是如何实现的?

sass等网站,有很多这样的功能,点击右侧的导航栏,页面会跳转到相应的位置,bootstrap中文网以及sf的文章页面使用的是哈希值对应ID的做法,这种做法没有滚动效果,想达到sass.hk的滚动效果该如何做?

另外,使页面滚动到相应位置时,对应的导航位置高亮该如何做到?

另另外,使用哈希值+id控制跳转时,浏览器的后退按钮会记录,如何能够做到不记录?

另另另外,使用使用哈希值+id控制跳转时,内容部分始终是跳转到页面的顶部,这种情况下,如果header是position:fixed;就会把内容的一部分遮挡住,这个问题该如何解决?

阅读 2.7k
2 个回答

看了下这个网站,是用js slidedown slideup实现的。
至于高亮,也是js点击事件加上class实现。

图片描述

其实做的也不是很好,向下滚动的时候导航栏并没有对应。

我一般都还是用bootstrap来实现的。

拿去玩~说爱我~

$(function(){
    offset_height = $('#topbar').height();/*取fixed顶条高度*/
    $("a[href*='#jumps-']").bind("click",jumpy($(this).attr('href')));
     
     跳转部分
    function jumpy(event,hightling_traget){
        offsettop =$(hightling_traget).scrollTop();
        $("a[href*='#jumps-']").removeClass('highlight');/*去掉其他高亮*/
        event.target.addClass('highlight');/*加当前事件对象高亮*/
        $('body,html').stop().animate({scrollTop:offsettop+offset_height},1000);/*飘当前事件对象顶部高度+顶条高度*/
        return false;
    };
});

更新:大概这个思路,代码好不好用、包不报错;喝酒了,我也不太清楚...b

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题