Форум

cOAPerator · #1 (**permalink**) 24.08.2013, 21:10

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

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

// кнопка наверх
$(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^="#"] - это оно и есть?

danik.js · #2 (**permalink**) 24.08.2013, 21:25

Как быстрое решение - a[href^="#"]:not(#back-top)

cOAPerator · #3 (**permalink**) 24.08.2013, 21:32

Сообщение от 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;
		});
	});
});

cOAPerator · #4 (**permalink**) 25.08.2013, 17:06

что никто не поможет? (

рони · #5 (**permalink**) 25.08.2013, 18:46

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>

danik.js · #6 (**permalink**) 25.08.2013, 18:48

Сообщение от cOAPerator

что никто не поможет? (

Нет. Здесь никого нет. И я не предлагал никаких вариантов. И меня тут тоже нет.

danik.js · #7 (**permalink**) 25.08.2013, 18:49

рони, взял поднасрал мне...

cOAPerator · #8 (**permalink**) 25.08.2013, 22:07

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

не подскажете как обрезать все до символа # ?

рони · #9 (**permalink**) 25.08.2013, 23:48

cOAPerator,

var url = 'http://sait.ru/category/statia.htnl#pod-razdel1';
  url =  url.replace(/^[^#]+/,'')
  alert(url);

cOAPerator · #10 (**permalink**) 26.08.2013, 18:46

рони, спасибо за код, только вот мой вариант не работает, делаю вот так:

$('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;
});

подскажите в чем ошибка ?

Форум

Справочник

Discord чат

Курсы javascript