adjust & opt

app/index.html

@@ -55,12 +55,14 @@
                         <button type="submit" class="btn btn-default">查看</button>
                     </form>
                     <ul class="nav navbar-nav navbar-right">
+                        <li><a href="#/report">GitHub 报告</a>
+                        </li>
                         <li><a href="#/donate">打赏</a>
                         </li>
                         <li><a href="#/about">关于</a>
                         </li>
                         <li class="dropdown">
-                            <a class="dropdown-toggle suggestionDrop" data-toggle="dropdown" role="button" aria-expanded="false">提点建议</a>
+                            <a class="dropdown-toggle suggestionDrop" data-toggle="dropdown" role="button" aria-expanded="false">反馈</a>
 
                             <ul class="dropdown-menu" role="menu">
                                 <li>
@@ -88,6 +90,8 @@
     </div>
     <!-- Main App Content Done -->
 
+    <a href="#0" class="cd-top">Top</a>
+
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

app/scripts/controllers/common.js

@@ -5,32 +5,34 @@ var clearBDShare = function() {
 }
 
 function drawChart(id, option, type, theme) {
-  require(
-    [
-      'echarts',
-      'echarts/chart/' + type
-    ],
-    function(ec) {
-      var myChart = ec.init(document.getElementById(id));
-      if (theme) {
-        require(['echarts/chart/theme/' + theme], function(tarTheme){
-            myChart.setTheme(tarTheme);
-        });
-      }
-      myChart.setOption(option);
-    }
-  )
+    require(
+        [
+            'echarts',
+            'echarts/chart/' + type
+        ],
+        function(ec) {
+            var myChart = ec.init(document.getElementById(id));
+            if (theme) {
+                require(['echarts/chart/theme/' + theme], function(tarTheme) {
+                    myChart.setTheme(tarTheme);
+                });
+            }
+            myChart.setOption(option);
+        }
+    )
 }
 
-function IsRemote()
-{
-   var userAgentInfo = navigator.userAgent;
-   var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
-   var flag = false;
-   for (var v = 0; v < Agents.length; v++) {
-       if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; }
-   }
-   return flag;
+function IsRemote() {
+    var userAgentInfo = navigator.userAgent;
+    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
+    var flag = false;
+    for (var v = 0; v < Agents.length; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+            flag = true;
+            break;
+        }
+    }
+    return flag;
 }
 
 
@@ -88,7 +90,30 @@ $(function() {
     $("#feedback-main").click(function() {
         return false;
     })
-    $.digits = function(text){
+    $.digits = function(text) {
         return text.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
     }
+    var offset = 300,
+        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
+        offset_opacity = 1200,
+        //duration of the top scrolling animation (in ms)
+        scroll_top_duration = 700,
+        //grab the "back to top" link
+        $back_to_top = $('.cd-top');
+
+    //hide or show the "back to top" link
+    $(window).scroll(function() {
+        ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible'): $back_to_top.removeClass('cd-is-visible cd-fade-out');
+        if ($(this).scrollTop() > offset_opacity) {
+            $back_to_top.addClass('cd-fade-out');
+        }
+    });
+
+    //smooth scroll to top
+    $back_to_top.on('click', function(event) {
+        event.preventDefault();
+        $('body,html').animate({
+            scrollTop: 0,
+        }, scroll_top_duration);
+    });
 });

app/scripts/controllers/indexCtl.js

@@ -12,7 +12,9 @@ App.controller('indexCtl', ['$scope', '$location', function($scope, $location) {
         return width;
     };
     $("#slogan").parent().height($(window).height() / 5)
-    // $("#search-part").height($(window).height() - $("#slogan").parent().height() - 100 - 71 - parseFloat($(".container-fluid.ng-scope").css("margin-top").replace("px", "")) - $(".support-logo").height());
+    var subHeight = $(window).height() - $("#slogan").parent().height() - 100 - 71 - $(".report-entry").outerHeight() - parseFloat($(".container-fluid.ng-scope").css("margin-top").replace("px", "")) - $(".support-logo").height()
+    $("#search-part").height(parseInt(subHeight * 2 / 3));
+    $(".report-entry").css('margin-bottom', parseInt(subHeight * 1 / 3))
     $("#slogan").css({
         "paddingLeft": ($("#our-name").textWidth() - $("#slogan").textWidth() - 3) + "px"
     });

app/styles/main.css

@@ -403,3 +403,51 @@ p {
 .average table td:nth-of-type(3){
   width: 30%;
 }
+.cd-top {
+  display: inline-block;
+  height: 40px;
+  width: 40px;
+  position: fixed;
+  bottom: 100px;
+  right: 10px;
+  z-index: 10;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+  /* image replacement properties */
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  background: rgba(232, 98, 86, 0.8) url(/images/cd-top-arrow.svg) no-repeat center 50%;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
+  -moz-transition: opacity .3s 0s, visibility 0s .3s;
+  transition: opacity .3s 0s, visibility 0s .3s;
+}
+
+.cd-top.cd-is-visible {
+  /* the button becomes visible */
+  visibility: visible;
+  opacity: 1;
+}
+.cd-top.cd-fade-out {
+  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
+  opacity: .5;
+}
+.cd-top:hover {
+  background-color: #e86256;
+  opacity: 1;
+}
+@media only screen and (min-width: 768px) {
+  .cd-top {
+    right: 20px;
+    bottom: 20px;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .cd-top {
+    height: 60px;
+    width: 60px;
+    right: 30px;
+    bottom: 30px;
+  }
+}

app/views/index.html

@@ -21,8 +21,9 @@
                     </div>
                 </div>
                 <div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 report-entry">
-                    <a href="#/report"><p>2014年GitHub中国开发者年度报告⬇</p>
+
                     <p><img src="images/report_cover.png"></p></a>
+                    <a href="#/report"><p>2014年GitHub中国开发者年度报告</p>
                 </div>
             </div>
             <div class="row">