Вход • Регистрация

Не работает кнопка наверх сайта

  • 09 марта 2019 г. , редакция: 09 марта 2019 г.
  • Доброе утро всем! Уже несколько недель бьюсь с кнопкой для сайта которая возвращает страницу наверх, уже перепробовал кучу вариантов, но работает она только на Internet explorer как положено, в остальных браузерах стоит строго внизу и не появляется сразу после прокрутки, сайт
    https://паркивидное.рф Пробовал кнопку с вашего форума https://user.diafan.ru/forum/show2860 так она вообще не заработала. Может кто нибудь посмотреть, что я делаю не так. Все, что я находил в интернете пишут что работает во всех браузерах, у меня никак не выходит каменный цветок. Я новичок в этом деле, может чего и упустил.
    • 09 марта 2019 г. , редакция: 09 марта 2019 г.
    • Вот Вам "рыба". Допиливайте.

      Это JavaScript-код:
      Код
      // Возврат в начало страницы
      $("body").append("<span id='top' class='svg-icon icon-arrow-up'>⇑ наверх</span>");
      $("#top").hide();

      // fade in #top
      $(function () {
      $(window).bind('ready scroll', function () {
      if ($(this).scrollTop() > 300) { // на какой высоте от начала экрана выводить стрелку
      $('#top').fadeIn();
      } else {
      $('#top').fadeOut();
      }
      });
      });

      $('#top').click(function () {
      $('html, body').animate({
      scrollTop: 0
      }, 'slow');
      return false;
      });
      Это оформление
      Код
      /* Кнопка возврата в начало страницы */
      #top {
      position: fixed;
      bottom: 20px;
      right: 15px;
      z-index: 999;
      color: #7C9F9B;
      line-height: 40px;
      width: 40px;
      height: 40px;
      text-align: center;
      transition: color .5s linear 0s;
      text-decoration: none
      }

      #top:hover, #top:focus {
      text-decoration: none;
      outline: 0;
      color: #193F3B;
      }
  • 09 марта 2019 г.
  • Тут два варианта.
    Либо не в активной теме это делаете /custom/вашатема
    Либо не правильно делаете и проще будет сюда обратиться http://pro.user.diafan.ru/

    Если хотите чтобы помогли здесь, опишите полностью что как и куда прописывали добавляли.
    • 09 марта 2019 г.
    • Да тема лежит в папке custom/vidnoe. Тема активная. Да вроде в Internet explorer работает, а в других браузерах стоит внизу, не появляется при прокрутки страницы.
    • 09 марта 2019 г. , редакция: 11 марта 2019 г.
    • Сам скрипт

      Код
      jQuery(document).ready(function($){
      var
      speed = 1000,
      $scrollTop = $('<a href="наверх" title="Быстро вернуться наверх" class="scrollTop"><i class="fa fa-angle-double-up"></i></a>').appendTo('body');

      $scrollTop.click(function(e){
      e.preventDefault();

      $( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
      });

      //появление
      function show_scrollTop(){
      ( $(window).scrollTop() > 100 ) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600);
      }
      $(window).scroll( function(){ show_scrollTop(); } );
      show_scrollTop();
      });
    • 09 марта 2019 г. , редакция: 11 марта 2019 г.
    • Оформление прописал в файл style.css, находящийся в папке custom/vidnoe/css

      Код
      .scrollTop {
      /* по-умолчанию скрыта */
      display: none;
      /* скругяем углы */
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%;
      /* фиксируем позицию кнопки */
      position: fixed;
      /* размеры кнопки */
      width: 100px;
      height: 100px;
      /* положение кнопки */
      right: 1rem;
      bottom: 1rem;
      /* вид курсора */
      cursor: pointer;
      /* эффект перехода между двумя состояниями кнопки */
      -webkit-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1);
      -moz-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1);
      -ms-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1);
      -o-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1);
      transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1)
      }
      /* смещение кнопки вверх при наведении */

      .scrollTop:hover {
      bottom: 2rem
      }

      /* дополнительные элементы офрмления кнопки */

      .scrollTop:before,
      .scrollTop:after {
      content: "";
      top: 0;
      left: 0;
      background-color: #0a0a0a;
      width: 100px;
      height: 100px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
      opacity: 0;
      }

      /* определяем имя, тип и скорость анимации лля :before */
      .scrollTop:before {
      background-color: #0a0a0a;
      -webkit-animation: clickMe 1.8s 333ms infinite ease-out;
      -moz-animation: clickMe 1.8s 333ms infinite ease-out;
      animation: clickMe 1.8s 333ms infinite ease-out
      }

      /* определяем имя, тип и скорость анимации лля :after */
      .scrollTop:after {
      -webkit-animation: clickMe 1.8s 777ms infinite ease-out;
      -moz-animation: clickMe 1.8s 777ms infinite ease-out;
      animation: clickMe 1.8s 777ms infinite ease-out
      }

      /* формируем вид иконки */
      .scrollTop i {
      width: 45px;
      height: 45px;
      display: block;
      background: rgba(165, 186, 204, 0.61);
      color: #fff;
      text-align: center;
      line-height: 45px;
      font-size: 3.0rem;
      background-size: 12px;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      border-radius: 100%;
      position: absolute;
      left: 28px;
      top: 28px;
      z-index: 100
      }

      /* анимация */
      @-webkit-keyframes clickMe {
      0% {
      opacity: 0;
      -webkit-transform: scale(0)
      }
      5% {
      opacity: 1
      }
      100% {
      opacity: 0
      }
      }

      @-moz-keyframes clickMe {
      0% {
      opacity: 0;
      -moz-transform: scale(0)
      }
      5% {
      opacity: 1
      }
      100% {
      opacity: 0
      }
      }

      @keyframes clickMe {
      0% {
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0)
      }
      5% {
      opacity: 1
      }
      100% {
      opacity: 0
      }
      }
    • 09 марта 2019 г. , редакция: 09 марта 2019 г.
    • Ну и наконец прикрутил скрипт к футеру, то есть на все страницы

      <insert name="show_js" files="flipcard.js, jquery.modal.min.js, slick.min.js, site-scripts.js, top_to_back.js" />

      последний скрипт и есть кнопка
  • 09 марта 2019 г.
  • Ой да сам скрипт лежит в папке custom/vidnoe/js
    • 11 марта 2019 г.
    • а в show_js путь до скрипта прописали? custom/vidnoe/js/top_to_back.js
      • 11 марта 2019 г.
      • Вроде как все скрипты подключаются без путей
        <insert name="show_js" files="flipcard.js, jquery.modal.min.js, slick.min.js, site-scripts.js, top_to_back.js" />
        • 11 марта 2019 г. , редакция: 11 марта 2019 г.
        • А вы пропишите в файле /themes/functions/show_js.php
          Код
          <script type="text/javascript" src="'.BASE_PATH.Custom::path('js/top_to_back.js').'" charset="UTF-8"></script>';

          если он (show_js.php) у вас не в папке кастом
          • 11 марта 2019 г. , редакция: 11 марта 2019 г.
          • Файл находится с custom/vidnoe/themes/functions/show_js.php , но где не ставлю этот код, сразу сайт выдает ошибку, на строку где я прописал. Сильно не ругайте, я говорил, что новичок в этом деле.
            • 11 марта 2019 г.
            • Такое впечатление, что вы вообще знаний в коде не имеете. Если так и есть, то либо в проекты пишите, либо учитесь самостоятельно.
              Пропишите вставку кода непосредственно в шаблон страницы, не влезая в <?php ?> . Как обычный статический HTML.
              Если там заработает, тогда уже можно думать, как вставить в функцию.
  • 11 марта 2019 г.
  • Спасибо всем, все таки нечего не работает на этом сайте, оставлю как есть, на этом сайте вообще нормально нечего не работает, на других сразу все работает, с первой попытки, так что значит сайт сам кривой.
    • 11 марта 2019 г.
    • Код надо или вне
      Код
      ?>

      вставлять, либо внутри РНР-кода, но через
      Код
      echo ' *** ';

      Если знаний нет, на pro.user.diafan.ru создайте проект, Вам за 10 минут эту кнопку вставят
    • 12 марта 2019 г.
    • Цитата
      на этом сайте вообще нормально нечего не работает, на других сразу все работает, с первой попытки, так что значит сайт сам кривой

      • 12 марта 2019 г.
      • Легко смеяться над слепым пока сам зрячий. И в колодец плевать, пока пить не приспичило.
        • 12 марта 2019 г.
        • Павел хватит философии.
          Сравнение не уместно.


          • 12 марта 2019 г.
          • Ещё как уместно. Когда у Вас появится проблема в следующий раз на форуме или в вишлисте, я Вам скопирую Ваши смайлы в качестве помощи и поддержки.
            • 12 марта 2019 г.
            • Павел, я имел ввиду, что если что-то не работает с первой попытки, значит сайт кривой.
              А смайлы можете себе оставить. Для настроения)
    • 12 марта 2019 г. , редакция: 12 марта 2019 г.
    • Цитата
      значит сайт сам кривой.
      Адрес сайта покажите. В принципе, следовало сразу его сообщить. Так было бы куда понятнее. Есть подозрение на ошибку при выполнении стриптов JS. В этом случае - да, может не работать на этом конкретном сайте.

      А другие сайты тоже на DIAFAN.CMS или на других? Есть ведь ещё вариант, что там вы знаете куда вставлять код, а тут - нет.
      • 12 марта 2019 г.
      • Цитата
        сайт https://паркивидное.рф
        • 12 марта 2019 г. , редакция: 12 марта 2019 г.
        • Спасибо, проглядел. кириллические домены в ссылки не переводит форум. Ошибок нет.
        • 12 марта 2019 г.
        • В Версии для слабовидящих местами строчки на строчки налезают
          -
          Код
          line-height
          (увеличте)
    • 12 марта 2019 г. , редакция: 12 марта 2019 г.
    • У Вас кэш включён, поэтому не скажу где именно этот стиль в файле, ищите поиском:

      Код
      body {

      font-family: 'PT Serif',serif;
      font-weight: 400;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      -webkit-transform: translate3d(0,0,0);

      }

      Уберите оттуда

      -webkit-transform: translate3d(0,0,0);

      и заработает Ваша кнопка.
      В IE работает только потому, что он не поддерживает это свойство.
      • 12 марта 2019 г.
      • Хм.. Павел, а какая связь между этим свойством и темой топика?
        Мне как бы для общего развития интересно.
        • 12 марта 2019 г.
        • Может дело было в кэше?
          Я вчера вечером с хрома зашел на сайт и кнопка работала
        • 12 марта 2019 г.
        • На сколько помню, это сдвиг, перемещение элемента. И логично, если оно "0", то означает запрет.
          translate
          • 12 марта 2019 г.
          • Может просто без смещения?
            Полоса прокрутки как-то с этим связана?
  • 12 марта 2019 г. , редакция: 12 марта 2019 г.
  • Ура заработало, надо же одна строка и все портила, спасибо огромное всем кто помогает, таким как мы, а учится никогда не поздно. Мне очень нравится этим заниматься, поэтому буду дальше развиваться. Решение с убиранием строки -webkit-transform: translate3d(0,0,0); сработало.
    • 12 марта 2019 г.
    • Последите за сайтом, я не понял для чего это свойство там вообще было написано для BODY. Может что-то другое на этом завязано.

Новости

  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 

Форум