jQuery угасает ссылку «наверх». Видимость ссылки на загрузку страницы

Я пытаюсь внедрить ссылку «назад», которая исчезает на моей странице, как только пользователь прокрутил страницу на определенную сумму.jQuery угасает ссылку «наверх». Видимость ссылки на загрузку страницы

Я заметил, что на некоторых моих страницах ссылка на «вверху» будет мигать на странице, прежде чем скрываться, но не на других. В попытке отследить причину «флеш-связи» я создал скрипт JS, чтобы вы могли просмотреть мою кодировку и, надеюсь, найти то, что вызывает несогласованность. Сама скрипка JS, похоже, работает нормально, но это может быть просто потому, что она в скрипке. Может быть, есть строка кода, которую я мог бы добавить, чтобы убедиться, что ссылка скрыта при загрузке?

Спасибо, что нашли время, чтобы посмотреть на это. Это очень ценно.

http://jsfiddle.net/uLUWV/

HTML

<div class="container"> 
Test Content 
</div>  
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>

CSS

#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;} 
#back-top a {width: 83px; display: block;} 
#back-top span {width: 83px; height: 94px; display: block; background-color:red;} 

.container {height:4000px;}

JQuery

$(document).ready(function(){ 

    // hide #back-top first 
    $("#back-top").hide(); 

    // fade in #back-top 
    $(function() { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 500) { 
       $('#back-top').fadeIn(); 
      } else { 
       $('#back-top').fadeOut(); 
      } 
     }); 

     // scroll body to 0px on click 
     $('#back-top a').click(function() { 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      return false; 
     }); 
    }); 

});

источник

2013-06-05 Alex Ritter

Кажется, что в FF 21.0 WinXP –

кажется прекрасным и в Chrome 27 на Linux. –

OP сказал, что он работает на скрипке, но не на его сайте, поэтому, конечно, он отлично работает. @Alex Ritter, можете ли вы опубликовать свою нерабочую страницу? –

Пятнистый вопрос.

Вам необходимо ввести свой CSS #back-top{display : none}.

Один из них есть, но он переписывается вашими медиа-запросами. Вам нужен более специфичный селектор только для отображения.

Добавьте эту строку в skin.css и он должен исправить ошибку:

p#back-top{display : none}

Проверка после, если ваши медиа-запросы по-прежнему работать. Если нет, вы также должны быть более конкретными в своих запросах.

Прямо сейчас, ваша кнопка скрыта .hide(). Поэтому, когда вы можете скрыть кнопку с помощью CSS, вы сможете удалить эту строку.

источник

2013-06-05 17:27:40

Право! Работаю как шарм. Спасибо чувак. –

Я проверил код, приведенный ниже, и она работала без проблем

<!doctype html> 
    <html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       // hide #back-top first 
       $("#back-top").hide(); 

       // fade in #back-top 
       $(function() { 
        $(window).scroll(function() { 
         if ($(this).scrollTop() > 500) { 
          $('#back-top').fadeIn(); 
         } else { 
          $('#back-top').fadeOut(); 
         } 
        }); 

        // scroll body to 0px on click 
        $('#back-top a').click(function() { 
         $('body,html').animate({ 
          scrollTop: 0 
         }, 800); 
         return false; 
        }); 
       }); 

      }); 
    </script> 
    <style type="text/css"> 
     #back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;} 
    #back-top span {width: 83px; height: 94px; display: block; background-color:red;} 

    .container {height:4000px;} 

#back-top a {width: 83px; display: block;color: white;} 
#back-top a:active { 
color: white; 
} 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
    Test Content 
    </div>  
    <p id="back-top"><a href="#top"><span>Go To Top</span></a></p> 
    </body> 
    </html>

Этот код работает в Вашем браузере?

источник

2013-06-05 17:15:47 Leonardo

Он работает на большинстве страниц, что странно. Есть несколько страниц, на которых ссылка мигает каждый раз. Вы можете посмотреть это на http://temp.yandasmusic.com –

jQuery угасает ссылку «наверх». Видимость ссылки на загрузку страницы

ответ

Смежные вопросы