ВСЕ скрипты прокрутки страницы теперь ЗДЕСЬ
перенесено
Кнопки вверх и вниз страницы с плавной прокруткой и эффектом затухания
В конец HTML-верх или ближе к началу HTML низ
Несколько вариантов картинок кнопок
Кнопки прокрутки страницы с эффектом затухания (JS, HTML)
Сообщений 11 страница 20 из 23
Поделиться129.01.18 10:44
- технозомби
- Уважение: +9804
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1612
- Проверенный спец: FDFD
Поделиться1127.01.21 23:51
- Техномаг
- Уважение: +1105
- Достижения/подарки: cake 6 emoji_events 3
- Наградные баллы: 52
- Проверенный спец: FDFD
Helheima, хмм... Не помогло... *высшие силы глубоко задумались*
Поделиться1227.01.21 23:55
- Участник
- Уважение: +68
#p146583,satsana написал(а):
Helheima, хмм... Не помогло... *высшие силы глубоко задумались*
У меня тут на тестовом был еще вариант полу-готового этого дизайна со старыми кнопками... они перестали работать когда я изменила что-то вверху в стиля.
Поделиться1327.01.21 23:57
- Участник
- Уважение: +68
Это был #pun, но я не пойму, что я в нем не так сотворила...Как только я меняю #pun у меня ломаются вверх-вниз и jamp
Отредактировано Helheima (27.01.21 23:58)
Поделиться1428.01.21 00:04
- Техномаг
- Уважение: +1105
- Достижения/подарки: cake 6 emoji_events 3
- Наградные баллы: 52
- Проверенный спец: FDFD
Helheima, нашла. Позиционирование ломает свойство backdrop-filter блока #pun. Вот хоть убейте, я не знаю, почему так. Но вам, кажется, придётся искать другой способ размытия заднего фона, либо обойтись без него. : (
Поделиться1528.01.21 00:08
- Участник
- Уважение: +68
#p146586,satsana написал(а):
Helheima, нашла. Позиционирование ломает свойство backdrop-filter блока #pun. Вот хоть убейте, я не знаю, почему так. Но вам, кажется, придётся искать другой способ размытия заднего фона, либо обойтись без него. : (
Беда, мое любимое мыльцо, вот уж кого я никогда не заподозрила бы в таком гнусном предательстве Q.Q
Размою в фотошопе, огромное спасибо за помощь, ни в жизнь бы не узнала что так можно было сломать все... буду впредь внимательнее ломастырить!
Поделиться1631.05.22 12:56
- Участник
- Уважение: +85
Тоже над позиционированием страдаю х)
Действительное и желаемое
Хочется прилепить к табличке где-нибудь посередине справа и чтобы на всех экранах +- одинаково смотрелось, и чтоб не разъезжались и не накладывались сильно. То есть, я бы просто указала 50-55%, но тогда они разъедутся и/или наедут друг на друга.
Я сама чуть увеличиваю масштаб и это тоже сказывается на том, где кнопки в итоге окажутся. Хотелось бы чтоб не сказывалось и они всегда были там, где стрелочка.
А, да, ссыль https://kurism.rusff.me/
Отредактировано Cherasy (31.05.22 12:57)
Поделиться1731.05.22 13:38
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
Cherasy Нужны Картинки кнопок
2-е Желательно крепить ближе к полотну форума фиксированным отступом от полотна(думаю вариант 1) - ибо экраны разные
При креплении не к полотну(а к краю экрана) - кнопка появляется и при просмотре с мобилы, зачастую наезжая на полотно, - где она нафег не нужна(на мобилке) ибо скролится форум пальцем
Поделиться1831.05.22 13:44
- Участник
- Уважение: +85
#p168606,Deff написал(а):
Желательно крепить ближе к полотну форума фиксированным отступом от полотна
А как?
#p168606,Deff написал(а):
Нужны Картинки кнопок
Поделиться1931.05.22 14:06
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
#p168607,Cherasy написал(а):
А как?
К вечеру выложу
Поделиться2031.05.22 21:03
- Жерар Депардье
- Уважение: +3482
- Достижения/подарки: cake 4 emoji_events 4
- Наградные баллы: 122
Cherasy
Ну вот Вариант таки спозиционированный от полотна, а не от правого края экрана:
<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="https://forumstatic.ru/files/001b/98/f8/99440.png" border="0" width=100%/></div>
<div class="go-down" id='OnBottom'><img src="https://forumstatic.ru/files/001b/98/f8/86025.png" border="0" width=100%/></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:5px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:.7; /*прозрачность*/
margin-bottom:5px; /*отступ снизу (можно не указывать)*/
width:30px; /*ширина кнопки*/
height:30px; /*высота кнопки*/
}
.go-up {
bottom:240px; /*положение от низа окна браузера верхняя кнопка*/
margin-left: 930px;
}
.go-down {
bottom:200px; /*положение от низа окна браузера нижняя кнопка кнопка*/
margin-left: 930px;
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
Красным - подвижка от края полотна(регулируем) 
