网页特效：回到顶部, 目录跟随定位, 翻书效果

2015-08-03 16:23:01

回到顶部

• 最简单的方法, 没有滑动效果, 直接跳到顶部

  <a id="scrollTop" href="javascript:scroll(0,0)">&#8657;</a>

• 滑动效果

    <a id="scrollTop" onClick="goTopEx()">&#8657;</a>
    <script>
        var $sty=document.getElementById("scrollTop").style
        var $top=document.documentElement.scrollTop
        function getScrollTop() { return $top + document.body.scrollTop}
        function setScrollTop(value) { if($top) $top=value; else document.body.scrollTop=value }
        window.onscroll = function() { getScrollTop()>0 ? $sty.display="block" : $sty.display="none" }
        function goTopEx() {
            var goTop = setInterval(scrollMove, 10);
            function scrollMove() { setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1) clearInterval(goTop) }
        }
    </script>
  

添加文章目录, 并实现跟随定位

• 基于bootstrap的affix.js特性, 参考 适合程序员的Blog – 基于github pages + jekyll + markdown打造自己的blog
• jquery防百度百科/淘宝/页面滚动效果
• JS：目录跟随定位效果的实现及锚点中使用name和id定位的区别
• 博客侧边栏跟随滚动效果
• 博客侧栏显示文章目录
• 仿百度页面滚动目录跟随定位效果

翻书效果

• 分享15个最好的翻书效果的jQuery的插件和例子
• jQuery 利用CSS3 3D Transforms做翻書效果 Flip Plugin