Grid Add Floating Back-to-Top-Button

Scriptcase 8 Discussion
#1

Hello to all the forum, I have a very long Grid that contains images and text, I would like to add a floating Back to Top Button, I found several examples in internet,I insert the code attached in onApplicatioInit. But nothing happens.

Can anyone tell me where is the problem.

Thank you for your reply.

Link: http://www.yourwebtech.info/tutorial…n-with-jquery/

Here is the code:

$_Back_To_Top="
<style>
.to-top-btn {
position: fixed;
bottom: 20px;
right: 30px;
text-decoration:none;
background: #FFFFFF;
color: #454440;
padding: 10px;
border-radius: 5px;
display: none;
}
</style>

<script src=’…/…/…/js/jquery.min.js’></script>

<a href=’#’ >
<img src=’…/…/…/file/img/up-arrow.png’ alt=‘back-to-top’>
</a>

<script>
jQuery(function($) {
//lets handle the button click event
$(’.to-top-btn’).on(‘click’, function(e) {
$(‘body, html’).stop().animate({scrollTop: 0}, ‘slow’, ‘swing’);
e.preventDefault();
});

//lets show the button when the page scroll to about 400 pixels
//change the value to your desired offset
$(window).scroll(function() {
if($(window).scrollTop() > 400){
//show the button when scroll offset is greater than 400 pixels
$(’.to-top-btn’).fadeIn(‘slow’);
}else{
//hide the button if scroll offset is less than 400 pixels
$(’.to-top-btn’).fadeOut(‘slow’);
}
});
});
</script>
";

echo $_Back_To_Top;

Floating Button To Close or Redirect (Grid or Form)
#2

Here is the code:

$_Back_To_Top="
<style>
.to-top-btn {
position: fixed;
bottom: 20px;
right: 30px;
text-decoration:none;
background: #FFFFFF;
color: #454440;
padding: 10px;
border-radius: 5px;
display: none;
}
</style>

<script src=’…/…/…/js/jquery.min.js’></script>

<a href=’#’ >
<img src=’…/…/…/file/img/up-arrow.png’ alt=‘back-to-top’>
</a>

<script>
jQuery(function($) {
//lets handle the button click event
$(’.to-top-btn’).on(‘click’, function(e) {
$(‘body, html’).stop().animate({scrollTop: 0}, ‘slow’, ‘swing’);
e.preventDefault();
});

//lets show the button when the page scroll to about 400 pixels
//change the value to your desired offset
$(window).scroll(function() {
if($(window).scrollTop() > 400){
//show the button when scroll offset is greater than 400 pixels
$(’.to-top-btn’).fadeIn(‘slow’);
}else{
//hide the button if scroll offset is less than 400 pixels
$(’.to-top-btn’).fadeOut(‘slow’);
}
});
});
</script>
";

echo $_Back_To_Top;

#3

I think you missed the Id of image to be .to_top_btn

#4

Hi I’m the author of the script. Upon checking the code you posted, you missed the img class “to-top-btn”.

Add the class like this:

<img src='../../../file/img/up-arrow.png' alt='back-to-top' class="to-top-btn">

If you have any other concern, you can post directly to this link so i can quickly answer your concern.

Best regards.

#5

^^^^^

This. I always mix “class” and “id” with the dot

#6

Thank you all, for your answers, I apologize for my late reply, now I post the code I used and it all works very well.
Congratulations iahnn for good code is really very helpful !!
It is true I had forgotten the class, in all cases, I added the css: z-index: 999; otherwise the grid of SC8 covered me up the button.
For this to work the code must be entered in onApplicationInit, below I post the fully functional code.
I hope it will help someone.
Hello to all.

$Img_Up_Arrow = [_PERC_wm_h].“up_arrow_azzurro_170x170.png”;

$Up_Pagina=
“<style>
.to-top-btn {
position: fixed;
width: 20vw;
height: auto;
bottom: 10%;
right: 5%;
z-index: 999;
text-decoration:none;
/background: #1E90FF;/
display: none;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
</style>
<html>
<!-- Bottone a Fine Pagina per Tornare al Top -->
<a href=’#’ >
<img src=’”.$Img_Up_Arrow."’ class=‘to-top-btn’ alt=‘back-to-top’>
</a>
</html>

<script>
jQuery(function($) {
//lets handle the button click event
$(’.to-top-btn’).on(‘click’, function(e) {
$(‘body, html’).stop().animate({scrollTop: 0}, ‘slow’, ‘swing’);
e.preventDefault();
});
//lets show the button when the page scroll to about 400 pixels
//change the value to your desired offset
$(window).scroll(function() {
if($(window).scrollTop() > 400){
//show the button when scroll offset is greater than 400 pixels
$(’.to-top-btn’).fadeIn(‘slow’);
}else{
//hide the button if scroll offset is less than 400 pixels
$(’.to-top-btn’).fadeOut(‘slow’);
}
});
});
</script>";

echo $Up_Pagina;

1 Like
#7

Thanks for share