Показать сообщение отдельно
  #5 (permalink)  
Старый 25.08.2013, 18:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Плавная прокрутка к якорям
cOAPerator,

<!DOCTYPE>
<html>
 <head>

  <title>Тег А, атрибут name</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style type="text/css">
  body{
    height: 4000px;
  }

  </style>
  <script>
   $(function(){
    $("#back-top").hide();
			$(window).scroll(function () {
			if ($(this).scrollTop() > 150) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

	   $('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top}, 800);
    return false;
});

	});


  </script>
 </head>
 <body>

  
  <p style="height:3000px;">Здесь много-много текста.
   Прокручивай его вниз. <br><a  href="#center">К середине</a>
  <p  style=" height: 100px auto "><a id="center">center</a></p>
   </p>

  <p id = "back-top" style="position:  fixed ; top: 30px; left: 500px"><a href="#top" >Наверх</a></p>

 </body>
</html>

Последний раз редактировалось рони, 25.08.2013 в 18:53.
Ответить с цитированием