Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2013, 21:10
Аспирант
Отправить личное сообщение для cOAPerator Посмотреть профиль Найти все сообщения от cOAPerator
 
Регистрация: 04.01.2012
Сообщений: 78

прогкрутка к якорям
привет всем уважаемые форумчане!

помогите пожалуйста с кодом.
на сайте есть вот такая кнопка прокрутки наверх, она работает нормально.
// кнопка наверх
$(function(){
	$("#back-top").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 150) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		$('#back-top a').click(function () {
			$('body,html').animate({scrollTop: 0}, 800);
				return false;
		});
	});
});


нарыл тут еще вот такой код:
$('a[href^="#"]').click(function(){
    var target = $(this).attr('href');
    $('html, body').animate({scrollTop: $(target).offset().top}, 300);
    return false; 
});


проблема в следующем: конфликтует с 1 кнопкой прокрутки вверх

собственно хотелось бы убрать конфликт, и чтобы работала прокрутка в статье от оглавдения вниз к якорям.

никак понять не могу в чем проблема. помогите пожалуйста.

Добавление: я еще хотел бы спросить, как обозначить все селекторы #
a[href^="#"] - это оно и есть?

Последний раз редактировалось cOAPerator, 24.08.2013 в 21:16.
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2013, 21:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Как быстрое решение - a[href^="#"]:not(#back-top)
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2013, 21:32
Аспирант
Отправить личное сообщение для cOAPerator Посмотреть профиль Найти все сообщения от cOAPerator
 
Регистрация: 04.01.2012
Сообщений: 78

Сообщение от danik.js Посмотреть сообщение
Как быстрое решение - a[href^="#"]:not(#back-top)
я вот подумал чуток, и пришел к выводу, что можно же добавить просто все остальные селекторы в основной код, прокрутка то та же
$(function(){
	$("#back-top").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 150) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		$('#back-top a').click(function () {
			$('body,html').animate({scrollTop: 0}, 800);
				return false;
		});
// добавляем вот это  // тут указываем что прокрутка для всех селекторов с #
		$('a[href^=]'.match( /#.+$/) ).click(function () {
			$('body,html').animate({scrollTop: 0}, 800);
				return false;
		});
	});
});
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2013, 17:06
Аспирант
Отправить личное сообщение для cOAPerator Посмотреть профиль Найти все сообщения от cOAPerator
 
Регистрация: 04.01.2012
Сообщений: 78

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

Плавная прокрутка к якорям
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.
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2013, 18:48
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от cOAPerator
что никто не поможет? (
Нет. Здесь никого нет. И я не предлагал никаких вариантов. И меня тут тоже нет.
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2013, 18:49
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

рони, взял поднасрал мне...
Ответить с цитированием
  #8 (permalink)  
Старый 25.08.2013, 22:07
Аспирант
Отправить личное сообщение для cOAPerator Посмотреть профиль Найти все сообщения от cOAPerator
 
Регистрация: 04.01.2012
Сообщений: 78

рони, спасибо за код, ваш работает отлично, только у меня на странице не работает.
у меня ссылки полные с # вконце? например
http://sait.ru/category/statia.htnl#pod-razdel1

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

cOAPerator,
var url = 'http://sait.ru/category/statia.htnl#pod-razdel1';
  url =  url.replace(/^[^#]+/,'')
  alert(url);
Ответить с цитированием
  #10 (permalink)  
Старый 26.08.2013, 18:46
Аспирант
Отправить личное сообщение для cOAPerator Посмотреть профиль Найти все сообщения от cOAPerator
 
Регистрация: 04.01.2012
Сообщений: 78

рони, спасибо за код, только вот мой вариант не работает, делаю вот так:
$('a[href^="#"]').click(function(){
	// добавляем обрезку 
	var url =  href.replace(/^[^#]+/,'')
	var target = $(this).attr(url);
	$('html, body').animate({scrollTop: target ==  '#top' ? 0 :$(target).offset().top}, 800);
	return false;
});


подскажите в чем ошибка ?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск