Introduction

Site Performance, jQuery scripts, Style & Design, Structure & Navigation, Site Navigation

"Scroll to Top" Button with Smooth-Scroll and Hover Effekt

  • Get this
  • Favourite
  • Report

A small simple but chic plugin for a "scroll to top", with a smooth scroll effect and a hover effect, consisting of CSS3.

The hover animations come without javascript, since the effects are made of CSS3. The style of the button and the CSS script is a free resource from jomla51.com. I have modified it for a scroll to top button and added more functions.

★ Choose between ion-icon, fa-icon or image instead of icon
★ Choose the color of the button (Hover Color)
★ Set the size of the button (small, medium, large)
★ Set distance from right and down

The smooth-scroll and scroll to top is a little jquery script. The the demo on my sites.

★ included ion-icon from the ionicframework
★ included fa-icon from the font awesome framework

The best result when using an image is selecting a transparent and square image.

Ein kleines, aber feines Plugin für ein "Scroll to Top" Button, mit einem mit weichen Scroll-Effekt (Smooth scroll) und einem Hover-Effekt, bestehend aus CSS3.

Die Hover-Animationen kommt ohne Javascript aus, da die Effekte komplett aus CSS3 bestehen. Der Stil der Schaltfläche und das CSS-Skript ist eine kostenlose Ressource von jomla51.com. Ich habe es für einen Scroll-to-Top-Button geändert und weitere Funktionen hinzugefügt.

★ Wähle zwischen Ion Icon, fa Icon oder einem Bild statt Icon
★ Wähle die Farbe der Schaltfläche (Hover Color)
★ Lege die Größe der Schaltfläche fest (klein, mittel, groß)
★ Abstand von rechts und unten einstellen

Der Smooth-Scroll und Scroll to Top ist ein kleines jquery-Skript. Ein Demo gibt es auf meinen Seiten.

★ inklusive ion-icon vom ionicframework
★ inklusive fa-icon vom font awesome framework

Das beste Ergebnis bei der Verwendung mit einem Bild ist die Auswahl eines transparenten und quadratischen Bild.


Works well!


Posted on 09 April 2017
Functionality

This tool is simple and works well. That´s all I was looking for.

Ease of use

Very simple

Support

Great, quick response

I used this to: my Joomla 3.6.5 site
itcs Open Hours

itcs Open Hours

Free | Opening Hours | it-conserv.de
3
Score:
0
1 review
Present your open times With this module you can easily display the opening times on the website. In addition, the entered opening times are evaluated based on the current system time (server time) and indicates whether the store has opened or closed. The current day is highlighted with green = open and red = closed. A text is output under the opening times. 2 Language Files (EN, DE) Responsive presentation CSS3 animation (mouseover) without javascript icons changeable (ion-icons) 4 different colors (blue, red, yellow, navy) week and times in ENG or DE select different time zones (new in v1.2.2) Basic Settings - choose your icon (ion-icon) - select your color (blue, red, yellow, navy) - add your text for - title (e.g. open hours) - close weekday (Is displayed instead of the time when "closed" is selected during the weekday) - text bottom, when is open (time) - text bottom, when is closed (time) - select week start (weekday) new in v1.2.2 - select a time zone - display of the current times in the backend and frontend (if desired) per Week Day - add text for the weekday - choose "open" or "closed" for the day - open time from - open time to Write the time in 24 hours or 12 hours format 24 hours e.g. 14:00 12 hours e.g. 02:00pm The current time is evaluated with PHP and it is displayed whether "open" or "closed".
m
itcs TeamCards

itcs TeamCards

Free | Thematic Directory | it-conserv.de
3
Score:
0
0 reviews
Show on with this module your team. Choose the colors and style in the back end and create up to 20 team cards in one module. The links can be individually adjusted per card, as well as the orientation of the image. The module and the animations come without javascript, since the effects are made of CSS3. 2 Language Files (EN, DE) Up to 20 Teamcards Responsive presentation CSS3 animation without javascript icons changeable (ion-icons) colors changeable automatic crop images Dimensions - Card 480 x 240 px - Image and text field 240 x 240 px Basic Settings - set the background color - set the text color - set the diamond color - set the align of cards (1 column or fluid = 2 columns) per icon (up to 3 ion-icon) - show oder hidden - class-name from the icon per Team Card - select or upload a image - images in portrait or landscape format are cropped - set the image align (left or right) - set the firstname, lastname and a slogan - set per icon a link If you do not enter a link in an icon, this icon will not be displayed. This applies only to the respective card. You can also a blank link e.g. #
m
itcs google place recension stars

itcs google place recension stars

Free | Social Display | it-conserv.de
3
Score:
0
0 reviews
Show your google place recension stars This is a simple module to show your google place stars. The Modul has simple hover animations with or without CSS3 tooltip for the button. Your visitors can leave a new review by clicking on the button. ★ Choose the backgrond (dark or bright) ★ language in german or english ★ CSS3 hover effect with or without tooltip ★ included ion-icon from the ionicframework The instructions are included in the module. You need the place ID and a API-Key for this. Place-ID: https://developers.google.com/places/place-id API-Key: https://console.developers.google.com/apis
m

itcs Scroll to Top Button

Version:
1.2.1
Developer:
it-conserv.de
Last updated:
Mar 30 2017
Date added:
Mar 29 2017
License:
GPLv2 or later
Type:
Free download
Includes:
Compatibility:
Download

Uses Joomla! Update System

Demo Support Documentation
  • Overall
  • Functionality

  • Ease of use

  • Documentation

    Not rated
  • Support