Добавил to-top

package.json

@@ -24,7 +24,8 @@
       "code": [],
       "thumb": [],
       "alert": [],
-      "btn": []
+      "btn": [],
+      "to-top": []
     },
     "addCssBefore": [
       "./src/scss/variables.scss",

src/blocks-demo.html

@@ -539,6 +539,25 @@
 
     </section>
 
+    <section class="blocks-library__item" id="btn" data-name=".btn">
+
+      <h2 class="blocks-library__item-title">Кнопка скролла вверх</h2>
+
+      <p>Кнопка появляется, если вертикальный скролл более 900 пикс.</p>
+
+      <p class="alert  alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;a href="#" class="to-top" id="toTop">↑&lt;/a></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
   </div>
 
   <style>
@@ -550,6 +569,8 @@
     }
   </style>
 
+  <a href="#" class="to-top" id="toTop">↑</a>
+
   @@include('_include/page_bottom.html')
 </body>
 </html>

src/blocks/btn/btn.scss

@@ -2,7 +2,6 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
 // Не пишите здесь другие селекторы.
 
-
 $gray-lighter:                hsl(0, 0%, 80%);
 $gray-lightest:               hsl(0, 0%, 90%);
 $text-color:                  hsl(0, 0%, 10%);

src/blocks/to-top/to-top.html

@@ -5,4 +5,4 @@
 @ @include('blocks/to-top/to-top.html')
 
 -->
-<div class="to-top">content</div>
+<a href="#" class="to-top" id="toTop">↑</a>

src/blocks/to-top/to-top.js

@@ -17,7 +17,7 @@ $( document ).ready(function() {
   showScrollTopButton();
 
   function showScrollTopButton(){
-    if ( $(document).scrollTop() >= 500 ) {
+    if ( $(document).scrollTop() >= 900 ) {
       $('#toTop').fadeIn();
     }
     else {

src/blocks/to-top/to-top.less

-// Для импорта в диспетчер подключений: @import './src/blocks/to-top/to-top.less';
-
-@import '../../less/variables.less';     // только для удобства обращения к переменным
-
-
-.to-top {
-  position: fixed;
-  right: 2rem;
-  bottom: 2rem;
-  z-index: 1;
-  width: 4rem;
-  height: 4rem;
-  border-radius: 50%;
-  background-color: #000;
-  color: transparent;
-  font: 0/0 a;
-  background-image: data-uri('image/svg+xml;charset=UTF-8', './src/blocks/to-top/img_to_bg/to-up.svg');
-  background-repeat: no-repeat;
-  background-position: center;
-  transform: rotate(180deg);
-
-  .js & {
-    display: none;
-  }
-}

src/blocks/to-top/to-top.scss

+// В этом файле должны быть стили только для БЭМ-блока alert, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
+// Не пишите здесь другие селекторы.
+
+.to-top {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 1;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  background-color: #000;
+  color: transparent;
+  font: 0/0 a;
+  // см. img_to_bg/to-up.svg
+  // http://yoksel.github.io/url-encoder/ru/
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 11' width='17' height='11'%3E%3Cpath fill='%23fff' d='M.202 1.97L1.956.204A.61.61 0 0 1 2.43 0a.61.61 0 0 1 .47.204L8.5 5.84 14.1.204A.61.61 0 0 1 14.57 0a.61.61 0 0 1 .474.204l1.754 1.766a.618.618 0 0 1 .202.473.62.62 0 0 1-.202.476l-7.826 7.875A.61.61 0 0 1 8.5 11a.61.61 0 0 1-.472-.204L.202 2.92A.618.618 0 0 1 0 2.444c0-.203.067-.34.202-.475z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  transform: rotate(180deg);
+
+  .js & {
+    display: none;
+  }
+}