[How To] Add a Scroll Back To Top Button (Page 1) / Maian Events / Maian Media Support Forums: Maian Media

Community Forum

Please read the intro before joining/posting. Thank you.

If you have questions about our software, chances are this forum has the answers.

You'll need to register before you can post on the forum to ask your question or to answer another one. A reply will be posted to each and every question that is asked so there is no need to double post or bump your post. We'll do our best to answer promptly, but in some cases it may take a day or two. If you bump your post, it may be removed. Bear with us and we'll get your question answered quickly.

Here are a few tips to help you to get your questions answered more rapidly.

IMPORTANT: Posts in English only. We don't employ translators and we'll be unable to understand your message properly and will probably delete it.
SOFTWARE: Each software has it's own forum. Software here is NOT supported. Posts about this software will be deleted. Supported software questions ONLY please.
SEARCH: Use the search option to see if your question has been answered on the forum before now or if there is an answer in the documentation of your software.
PERSONAL SUPPORT: If you have purchased a commercial version of any software, using the contact option at the licence centre ensures a faster response.
AUTO DELETION: Accounts older than 5 days, with no posts or topics, are automatically deleted. Only register if you are thinking of posting.
LINKS: Any links posted are not clickable (to deter spammers) and must be copied / pasted into your browser address bar.

Index Search Register Login

You are not logged in.

Topic Active | Unanswered

[How To] Add a Scroll Back To Top ButtonPosts in the Maian Events forum by SayWhatAgain

SayWhatAgain
01-09-2018 17:04:58

Hi,

if you want to add a Scroll Back To Top Button in Maian Events (very useful if you're watching it in your mobile phone), you have to edit this two files:

In content/_theme_default/header.tpl.php find:

<body>
<?php
// Shows only on extra small screens
?>

And add just after the <body> tag:

<body>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('#scroll').fadeIn();
}else{
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<a href="javascript:void(0);" id="scroll" title="Go Up" style="display: none;">Up!<span></span></a>
<?php
// Shows only on extra small screens
?>

In content/_theme_default/css/msw.css add at the end of the file:

#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
z-index: 999;
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#7851af;
opacity:1;
filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
#scroll:visited {
background-color:#7851af;
opacity:1;
filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}

And that's it. Now you don't have to "waste" your finger in your mobile screen to return to the top.

TipTop
24-07-2019 21:44:10

That feature would be a Great addition to 3.4. Way to Go (SayWhatAgain)!

RSS topic feed