прогкрутка к якорям
привет всем уважаемые форумчане!
помогите пожалуйста с кодом. на сайте есть вот такая кнопка прокрутки наверх, она работает нормально.
// кнопка наверх
$(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;
});
подскажите в чем ошибка ? |
| Часовой пояс GMT +3, время: 11:17. |