прогкрутка к якорям
привет всем уважаемые форумчане!
помогите пожалуйста с кодом. на сайте есть вот такая кнопка прокрутки наверх, она работает нормально.
// кнопка наверх
$(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^="#"] - это оно и есть? |
Как быстрое решение - 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,
: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>
|
Цитата:
|
рони, взял поднасрал мне...
|
рони, спасибо за код, ваш работает отлично, только у меня на странице не работает.
у меня ссылки полные с # вконце? например http://sait.ru/category/statia.htnl#pod-razdel1 не подскажете как обрезать все до символа # ? |
cOAPerator,
var url = 'http://sait.ru/category/statia.htnl#pod-razdel1'; url = url.replace(/^[^#]+/,'') alert(url); |
рони, спасибо за код, только вот мой вариант не работает, делаю вот так:
$('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;
});
подскажите в чем ошибка ? |
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;
});
|
рони, над вот этим кодом и мучаюсь )
вот это было
$(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 нет возможности, так как якоря делаются редактором |
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 |
Цитата:
В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id. у меня html 4.01 |
cOAPerator,
а самому подумать? как у вас кнопки вверх href выглядит? |
рони, все я понял свою ошибку. исправил и все заработало
еще 1 последний вопрос, как отступ сделать от верха после прокрутки к якорю? а то у меня вверху прикрепленное меню высотой 50px и после перехода к якорю скрывается под менюшкой. я думал в css задать отступ, но это не вариант. если правильно думаю то вот в этой строке
$('html, body').animate({scrollTop: target == 'top' ? 0 :$("[name='" + target + "']").offset().top}, 800);
0 надо поменять на 100 - получится отступ в 100 px. |
cOAPerator,
да 0 на 100 :cray: это для прокрутки кверху --- если к якорям $("[name='" + target + "']").offset().top + 100 и пробуйте прежде чем спросить. и читайте доку прежде чем что-то делать. |
рони, великодушное спасибо! за помощь и терпение! побольше бы таких людей как Вы!
Благодяря Вам я теперь понял как писать подобные скрипты. |
рони, тут тобнаружился косяк один, неправильно прощитывается отступ:
посмотреть рабочий вариант можно тут _http://starnox.ru/articles/php/upload-failov-i-vse-s-etim-svyazannoe.html в опере и лисе все нормально прокручивает, соответственно просчет отступа нормально происходит, проблема в хроме и webkit подобных. Добавление: проблему решил сам, спасибо. |
Цитата:
две картинки -- правильно и неправильно и ещё стрелками указать - но возможно вам поможет css
strong{
display: inline-block;
}
|
рони, на картинке не покажешь :) но суть такова что прокрутка производится вообще не туда куда нужно.
но я нашел уже откуда ноги растут, там проблема в структуре статьи была. если было написано вот так: <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> то нормально прокручивается к якорю. интересно то, что вебкит браузеры только глючат. опера с лисой при любом раскладе нормально прокручивают к якорю. |
| Часовой пояс GMT +3, время: 03:53. |