Вход

Просмотр полной версии : прогкрутка к якорям

cOAPerator
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
24.08.2013, 21:25
Как быстрое решение - a[href^="#"]:not(#back-top)
cOAPerator
24.08.2013, 21:32
Как быстрое решение - 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
25.08.2013, 17:06
что никто не поможет? (
рони
25.08.2013, 18:46
cOAPerator,
:cray:
<!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
25.08.2013, 18:48
что никто не поможет? (

Нет. Здесь никого нет. И я не предлагал никаких вариантов. И меня тут тоже нет.
danik.js
25.08.2013, 18:49
рони, взял поднасрал мне...
cOAPerator
25.08.2013, 22:07
рони, спасибо за код, ваш работает отлично, только у меня на странице не работает.
у меня ссылки полные с # вконце? например
http://sait.ru/category/statia.htnl#pod-razdel1

не подскажете как обрезать все до символа # ?
рони
25.08.2013, 23:48
cOAPerator,
var url = 'http://sait.ru/category/statia.htnl#pod-razdel1';
url = url.replace(/^[^#]+/,'')
alert(url);
cOAPerator
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;
});


подскажите в чем ошибка ?
рони
26.08.2013, 19:08
cOAPerator,
это $('a[href^="#"]') выборка ссылок начинающихся на # ----на такую http://sait.ru/category/statia.htnl#pod-razdel1 он не среагирует -- лучше конечно видет код над которым вы мучаитесь
^ начало
* содержит



$('a[href*="#"]').click(function(){
// добавляем обрезку
var target = $(this).attr('href').replace(/^[^#]+/,'');
$('html, body').animate({scrollTop: target == '#top' ? 0 :$(target).offset().top}, 800);
return false;
});
cOAPerator
26.08.2013, 20:19
рони, над вот этим кодом и мучаюсь )
вот это было $(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;
});
});
});
вот это стало $(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').replace(/^[^#]+/,'');
$('html, body').animate({scrollTop: target == '#top' ? 0 :$(target).offset().top}, 800);
return false;
});
});

но ссылки другие не работают почему то (кроме кнопки наверх, она работает), а в тестовом скрипте работают, хотя в тестовом скрипте и в рабочем они одинаковые.
я похоже догадываюсь в чем проблема, в тестовом скрипте якоря <a id="center">center</a>
а у меня в рабочем скрипте <a name="center">center</a> как положено по спецификации
потому и не работают ссылки простые.
как изменить скрипт чтобы с нормальными якорями работал скрипт?
использовать id нет возможности, так как якоря делаются редактором
рони
26.08.2013, 20:57
cOAPerator,
про спецификации ...
В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.

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

для медитации Селекторы jquery (http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D 1%8B)
cOAPerator
26.08.2013, 21:37
cOAPerator,
про спецификации ...
В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.

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

для медитации Селекторы jquery (http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D 1%8B)
теперь работают ссылки в документе, но не работает кнопка наверх

В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.
у меня html 4.01
рони
26.08.2013, 21:46
cOAPerator,
а самому подумать? как у вас кнопки вверх href выглядит?
cOAPerator
26.08.2013, 23:14
рони, все я понял свою ошибку. исправил и все заработало

еще 1 последний вопрос, как отступ сделать от верха после прокрутки к якорю?
а то у меня вверху прикрепленное меню высотой 50px
и после перехода к якорю скрывается под менюшкой. я думал в css задать отступ, но это не вариант.
если правильно думаю то вот в этой строке$('html, body').animate({scrollTop: target == 'top' ? 0 :$("[name='" + target + "']").offset().top}, 800);
0 надо поменять на 100 - получится отступ в 100 px.
рони
26.08.2013, 23:29
cOAPerator,
да 0 на 100 :cray: это для прокрутки кверху --- если к якорям $("[name='" + target + "']").offset().top + 100 и пробуйте прежде чем спросить. и читайте доку прежде чем что-то делать.
cOAPerator
26.08.2013, 23:34
рони, великодушное спасибо! за помощь и терпение! побольше бы таких людей как Вы!
Благодяря Вам я теперь понял как писать подобные скрипты.
cOAPerator
27.08.2013, 00:48
рони, тут тобнаружился косяк один, неправильно прощитывается отступ:
посмотреть рабочий вариант можно тут
_http://starnox.ru/articles/php/upload-failov-i-vse-s-etim-svyazannoe.html


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

Добавление: проблему решил сам, спасибо.
рони
27.08.2013, 02:49
неправильно прощитывается отступ
что значит неправильно? догадаться?

две картинки -- правильно и неправильно и ещё стрелками указать - но возможно вам поможет
css
strong{
display: inline-block;
}
cOAPerator
27.08.2013, 03:30
рони, на картинке не покажешь :) но суть такова что прокрутка производится вообще не туда куда нужно.
но я нашел уже откуда ноги растут, там проблема в структуре статьи была.
если было написано вот так:

<a href="ссылка на якорь"> ссылка на якорь</a>
<p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст<a href="якорь"></a></p>
<p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>

то прокручивается в началу 1 тега <p>
а если вот так:

<a href="ссылка на якорь"> ссылка на якорь</a>
<p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
<a href="якорь"></a><p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>

или вот так:

<a href="ссылка на якорь"> ссылка на якорь</a>
<p> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
<p><a href="якорь"></a> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>

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