Този код в момента като натисна някоя от стрелките избутва  форума най отгоре или най от долу,но го прави много бързо.Можели да се  направи да бъде по плавно?

<a href="#top" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></a>
 <a href="#page-footer" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></a>

 

Ето ти линк

преди 41 минути, smurfavr написа:

 

Този код в момента като натисна някоя от стрелките избутва  форума най отгоре или най от долу,но го прави много бързо.Можели да се  направи да бъде по плавно?

<a href="#top" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></a>
 <a href="#page-footer" style="width: 17px;height: 20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></a>

 

Ако искаш плавна анимация за скрол, това най-лесно се постига с JS/Jquery. Ако те разбирам правилно искаш нещо примерно както е бутона за Back to top в този форум?

преди 10 минути, Емил Костов написа:

Ето ти линк

Нц, не лъжи човека, това няма нищо общо с това, което иска той. Дал си му код, който просто ще отложи изпълнението с 2s след клик на мишока в/у обекта.

Искам ако може да се преправи моя код при натискане на някоя от стрелките да те избутва по плавно.

https://gist.github.com/ricardozea/abb9f98a19f6d04a0269

преди 16 минути, exwol написа:

Ако искаш плавна анимация за скрол, това най-лесно се постига с JS/Jquery. Ако те разбирам правилно искаш нещо примерно както е бутона за Back to top в този форум?

Нц, не лъжи човека, това няма нищо общо с това, което иска той. Дал си му код, който просто ще отложи изпълнението с 2s след клик на мишока в/у обекта.

Е с един button onclick и нужния делай на колкото секунди искаш пак може да стане ...

преди 2 минути, UltraBlue написа:

Е с един button onclick и нужния делай на колкото секунди искаш пак може да стане ...

Може ли един пример за такъв код ?

Ако някои може да го добави в кода.Аз не знам как става за това съм пуснал тема.

преди 3 минути, Ken написа:

Може ли един пример за такъв код ?

Нямам пример , отговарях заради анимацията която е постната по-горе , че може да стане , но сега като гледам тук момчето има нужда просто от scroll back функция.

преди 6 минути, UltraBlue написа:

Е с един button onclick и нужния делай на колкото секунди искаш пак може да стане ...

Това искам да го видя на практика, как само с един прост delay в CSS ще постигнеш търсения резултат. И забележи не казвам, че с CSS е невъзможно да се направи тази анимация, но ще трябва много повече от delay, за това просто казах, че най-лесно се постига с JS/Jquery, ако така или иначе в страницата се използва.

преди 8 минути, exwol написа:

Това искам да го видя на практика, как само с един прост delay в CSS ще постигнеш търсения резултат. И забележи не казвам, че с CSS е невъзможно да се направи тази анимация, но ще трябва много повече от delay, за това просто казах, че най-лесно се постига с JS/Jquery, ако така или иначе в страницата се използва.

Ти не ме разбра ,имах предвид също да се използва JS/Jquery , просто като кликеш на бутона да връща определена фукция която има някъв сетИнтервал. 

преди 35 минути, smurfavr написа:

Ако някои може да го добави в кода.Аз не знам как става за това съм пуснал тема.

Трябва да имаш скрипта някъде в страницата - дали ще е в тялото на html-а в script таг или в отделен js файл си решаваш ти. Ако и това не можеш да направиш, може би трябва да платиш на някого да ти го направи.

Аз кода го имам сложен,но много бързо избутва страниците.За какво да плащам при положение,че има готов код  и само трябва да се добави 1 ред код за да стане?

преди 10 минути, smurfavr написа:

Аз кода го имам сложен,но много бързо избутва страниците.За какво да плащам при положение,че има готов код  и само трябва да се добави 1 ред код за да стане?

Ами добави го де !

преди 11 минути, smurfavr написа:

Аз кода го имам сложен,но много бързо избутва страниците.За какво да плащам при положение,че има готов код  и само трябва да се добави 1 ред код за да стане?

Трябва ти ето това

преди 21 минути, Емил Костов написа:

Трябва ти ето това

Да добавя този код или да го комбинирам с моя?Не разбирам от подобни неща.Ако може някои да го направи на кода които съм дал.

преди 10 минути, smurfavr написа:

Да добавя този код или да го комбинирам с моя?Не разбирам от подобни неща.Ако може някои да го направи на кода които съм дал.

Е това е примерен вариант. Няма нищо общо с твоя код.

Добре е примерен код,но не знам как да направя моя.

преди 11 часа, UltraBlue написа:

Ти не ме разбра ,имах предвид също да се използва JS/Jquery , просто като кликеш на бутона да връща определена фукция която има някъв сетИнтервал. 

Ами аз вярно, че изобщо не се занимавам сериозно с HTML/CSS/JS и съм пълен профан пък и нямам особен мерак, просто като любител си пиша за мен си някакви неща когато ми потрябва. Тук обаче имаше конкретно питане в темата и се чудя за кое не съм те разбрал? Ти ме цитираш като казваш, че с delay можела да се направи въпросна анимация за скрол (аз поста ти така го разбирам) и аз ти казах, че само с delay няма да стане. Никой никъде първоначално не е говорил за setInterval. Разбира се, че може да се постави, но ставаше дума как базово да се изпълни задачата, а не с какви опции. Няма какво да добавя повече и приключвам по тази част. Разбрали сме се.

 

преди 3 часа, smurfavr написа:

Добре е примерен код,но не знам как да направя моя.

Е ти хептем на готово го искаш в смлян вид, то тия неща стават с малко четене. Ето ти една насока набързо драсната без да претендирам, че е 100% правилно, но поне ще работи. Реализирано е с JQuery, но дали само за подобна анимация си заслужава да се ползва цялата библиотека, вече ти си решаваш, на мен лично ми се види неразумно. Как и да е, позволих си да ти променя леко кода:

HTML:

1. Ако нямаш Jquery, ще трябва да го "вкараш" в HTML. Ако имаш, подминаваш това описание (1). Варианти как да си набавиш библиотеката: Или си я сваляш и слагаш на твоя сървър, описваш пътя до нея или ползваш cdn например Google. С други думи трябва да добавиш следния код в страницата си:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Къде да го добавиш, ами най-добре да е точно преди закриване на head.

 

2. Ето ти съвсем леко преправения от мен твой код, който беше дал първоначално:

<div class="go-to-top" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></div>
<div class="go-to-bottom" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the bottom"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></div>

 

JQuery

1. B body някъде (най-хубаво в началото на тага) слагаш следното:
 

<script>$(document).ready(function(){ $('.go-to-top').click(function(){$('html, body').animate({'scrollTop':$('#top').offset().top },800);}); $('.go-to-bottom').click(function(){$('html, body').animate({'scrollTop':$('#page-footer').offset().top },800);});});</script>

Това е всичко, по смляно нямаше как да ти го дам.

Виж демо на резултата: КЛИК

Добавих кода в  overall_header,но работи само стрелката за надолу.Стрелката за нагоре не фонкционира при натискане.

Кода го събрах на едно и съм го постави така.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>                                                                          
 <div class="go-to-top" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></div>
<div class="go-to-bottom" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the bottom"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></div>                                                                        
<script>$(document).ready(function(){ $('.go-to-top').click(function(){$('html, body').animate({'scrollTop':$('#top').offset().top },800);}); $('.go-to-bottom').click(function(){$('html, body').animate({'scrollTop':$('#page-footer').offset().top },800);});});</script>  

 

преди 31 минути, smurfavr написа:

Добавих кода в  overall_header,но работи само стрелката за надолу.Стрелката за нагоре не фонкционира при натискане.

Кода го събрах на едно и съм го постави така.

Е, ама казвай ги тези неща, че става дума за PhpBB, не съм врачка. Аз си мисля, че си правиш някакъв твой сайт и съм дал пълния пакет. Казах ти също, че ако вече имаш Jquery библиотеката, не е необходимо да я слагаш пак. Както и да е. Проверих ти кода на форума и имаш Jquery и то именно от Google. Махни сега първия ред т.е. ето това, което съм ти дал аз и виж дали ще проработят бутоните. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>                                                                          

Редактирано 17 февруари 20179 г. от exwol (преглед на промените)

Моя грешка,че не бях споменал версията на форума.  PhpBB 2 

Премахнах единия ред с кода които каза,но пак същия проблем.

Редактирано 17 февруари 20179 г. от smurfavr (преглед на промените)

преди 1 час, smurfavr написа:

Моя грешка,че не бях споменал версията на форума.  PhpBB 2 

Премахнах единия ред с кода които каза,но пак същия проблем.

Ми да няма да работи, аз съм се подвел от първоначалният ти код, че имаш елемeт с id top. Въпреки, че стана още по-голяма дивотия, давай ето така:

<div class="go-to-top" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:40px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the top"><img src="http://i97.servimg.com/u/f97/16/34/78/03/21311.png" style="width: 20px;"/></div>
<div class="go-to-bottom" style="width:20px;height:20px;padding:5px;background:#10245d;position:fixed;bottom:5px;right:2%;border-radius:2px;cursor:pointer;" title="Return to the bottom"><img src="http://i97.servimg.com/u/f97/16/34/78/03/11310.png" style="width: 20px;"/></div>
<script>$(document).ready(function(){ $('.go-to-top').click(function(){$('html, body').animate({scrollTop : 0},800);return false;}); $('.go-to-bottom').click(function(){$('html, body').animate({'scrollTop':$('#page-footer').offset().top },800);});});</script>

Може и по-чисто да се направят нещата, но не ми се рови сега в кода ти.

Редактирано 17 февруари 20179 г. от exwol (преглед на промените)

<script>$(document).ready(function(){ $('.go-to-top').click(function(){$('html, body').animate({scrollTop : 0},800);return false;}); $('.go-to-bottom').click(function(){$('html, body').animate({scrollTop: document.body.scrollHeight},5000);});});</script>

 

exwol Сега работи добре.Можеш ли да ми кажеш имали опция в кода от която да забавя още малко бързината на издигане?

Ken Твоя код и него ли трябва да добавя?