Cómo incrustar un botón de desplazamiento hacia arriba con el icono de Font Awesome en Madcap Flare
Soy un comunicador técnico que ama las palabras y la tecnología, no necesariamente en ese orden.
Recientemente experimenté con la incrustación y la personalización de un botón de desplazamiento hacia arriba (o una copia de seguridad) en mi ayuda de HTML5 MadCap Flare. Este botón ayuda a los usuarios a desplazarse hasta la parte superior de la página. Una característica útil es tener páginas largas y completas en los manuales de usuario.
Recibí el guión del sitio web de MadCap Flare, pero lo personalicé para cumplir con mis requisitos. Usé un ícono de Font Awesome en lugar del texto «Arriba» para el botón. Diseñé el botón usando CSS para que coincida con el botón de desplazamiento hacia arriba existente en mi aplicación. También puede usar el botón Bootstrap, pero decidí codificarlo. Esto es lo que parecía al final.
En esta página te explico:
- Cómo aplicar el botón de desplazamiento hacia arriba en MadCap Flare usando Javascript y CSS
- Cómo personalizar el código
- La lógica detrás del código para que pueda personalizar los valores según sus requisitos
Este tutorial está diseñado para:
- Escritores técnicos que tienen una comprensión de HTML a un nivel básico.
- Usuarios que saben cómo usar MadCap Flare y están familiarizados con sus diversas carpetas de proyectos (como «Recursos»)
- Usuarios que saben cómo crear y vincular Javascript y hojas de estilo a su proyecto MadCap Flare
Pasos de alto nivel para aplicar el botón de desplazamiento en la parte superior:
- Descargar el ícono de Font Awesome establecido por el sitio web de Font Awesome (seleccione la opción «Free for Web»).
- Copie y pegue la carpeta Font Awesome en MadCap Flare’s Contenidos > Recursos carpeta.
- Cree una nueva carpeta llamada Scripts en Contenidos > Recursos carpeta.
- Agregue un script a la carpeta Scripts denominado ScrollToTop.js. (Puede crear rápidamente una secuencia de comandos con el Bloc de notas guardando el archivo como ScrollToTop.js en «Todos los archivos».) Desplácese hacia abajo hasta la sección «Sección».El script para los botones de desplazamiento hacia arriba«Para ver el guión completo.
- Copie y pegue el botón CSS en la hoja de estilo del proyecto. Desplácese hacia abajo hasta la sección «botón CSS«para ver el código.
- Edite MasterPage para insertar el script.
- Importar fuente Awesome todo.css hoja de estilo en la hoja de estilo de su proyecto insertando este código en la parte superior de la hoja de estilo principal del proyecto: @importar url (‘../ fontawesome / css / all.css’);
Puede definir la acción del botón mediante un script. En el caso de un botón de desplazamiento hacia arriba, queremos que el botón nos ayude a desplazarnos hasta la parte superior de la página.
Podemos lograr la acción deseada usando el siguiente código Javascript en el botón de desplazamiento hacia arriba:
(function () {
if ($(".body-container").length === 1) {
var bodyContainer = $('.body-container')[0];
var mybutton = document.createElement("button");
mybutton.innerHTML = '<i class="fas fa-arrow-circle-up"></i>';
mybutton.setAttribute("id", "myBtn");
mybutton.addEventListener("click", topFunction);
bodyContainer.appendChild(mybutton);
// When the user scrolls down 20px from the top of the document, show the button
//Both functions are used based on the responsive portion of the output
bodyContainer.onscroll = function() {scrollFunction()};
window.onscroll = function() {scrollFunctionx()};
function scrollFunction() {
if (bodyContainer.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "inline";
} else {
mybutton.style.display = "none";
}
}
function scrollFunctionx() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "inline";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
$('html, body').animate({ scrollTop: 0 }, 1000);
$('html, documentElement').animate({ scrollTop: 0 }, 1000);
$('.body-container').animate({ scrollTop: 0 }, 1000);
}
}
})();Explicación del código Javascript y consejos de personalización:
(función () {……}) ();
Explicación: Esta parte del código muestra una expresión de una función que se llama inmediatamente. La expresión de función de llamada inmediata (IIFE) ayuda a mantener la confidencialidad de las variables definidas en la función.
Personalización: No necesariamente.
si ($ (. cuerpo-contenedor «). longitud === 1) {…}
Explicación: La clase .body-container está integrada en las plantillas de Flare r2. Siempre se muestra, incluso si no hay texto en el cuerpo. El código buscará elementos con la clase .body-container. Si la longitud total del resultado es igual a 1, es decir. solo se encontró 1 elemento con clase .body-container, luego se deben realizar los siguientes pasos.
Desplácese hasta Continuar
Solamente
También puede buscar manualmente la clase de contenedor de cuerpo abriendo una página HTML desde Salir> HTML5> Contenido carpeta usando el cuaderno.
Si no hay una clase de contenedor de cuerpo, como puede ser el caso en versiones anteriores de MadCap Flare, deberá ingresar manualmente la clase bodyProxy, es decir.
Importante: Si la clase body-container no se encuentra en su plantilla, el código no funcionará.
Personalización: No necesariamente.
var bodyContainer = $ («. cuerpo-contenedor»)[0];
Explicación: A la variable «bodyContainer» se le asigna el primer resultado de búsqueda. En nuestro caso, es el principal.
Personalización: No necesariamente.
var mybutton = document.createElement («botón»);
Explicación: Cree un nuevo nodo de botón.
Personalización: No necesariamente.
miboton.innerHTML = ‘ ‘
Explicación: Incruste el gran ícono de fuente en el nodo del botón. Cuando use HTML en Javascript, use comillas simples.
Personalización: Puede cambiar el icono de Font Awesome si es necesario. Usé el ícono «fas fa-arrow-circle-up». Puede consultar el sitio web de Font Awesome para ver conjuntos de iconos y nombres.
mybutton.setAttribute («id», «myBtn»);
Explicación: Establezca el ID de #myBtn en mybutton. Todos los estilos CSS definidos para myBtn se aplican aquí.
Personalización: No necesariamente.
myButton.addEventListener (función «clic») en la parte superior);
Explicación: Cuando haga clic en el botón, llame a la función «función superior».
Personalización: No necesariamente.
bodyContainer.appendChild (mibotón);
Explicación: Agregue el botón al elemento principal.
Personalización: No necesariamente.
bodyContainer.onscroll = function () {scrollFunction ()}; ventana.onscroll = function () {scrollFunctionx ()};
Explicación: Este código ayuda a configurar dos funciones de desplazamiento que determinan cuándo debe aparecer el botón en la salida. La primera función establece la función de desplazamiento para el contenedor predefinido y la segunda es para desplazar una ventana. Las funciones se usan indistintamente dependiendo de la parte sensible de la salida.
Personalización: No necesariamente.
function scrollFunction() {if (bodyContainer.scrollTop> 20 || (document.documentElement.scrolltop> 20) {myButton.style.display = «block»;} else {myButton.style.display = «none»;}}
Explicación: Si se desplaza más de 20 píxeles en la parte superior, el botón aparece en estilo de bloque. No se muestra si el desplazamiento no está activado. Además de bodyContainer, también estamos considerando , es decir. desplazando un elemento raíz. document.documentElement devuelve el elemento principal del documento. Entonces, para los documentos HTML, el elemento principal es .
Personalización: Puede cambiar el valor de desplazamiento (20) según sea necesario.
function scrollFunctionx () {if (document.body.scrollTop> 20 || document.documentElement.scrollTop> 20) {myButton.style.display = «block»; } else {myButton.style.display = «ninguno»; }}
Explicación: Igual que la explicación de scrollFunction ().
Personalización: Puede cambiar el valor de desplazamiento (20) según sea necesario.
función topFunction () {$ (‘html, cuerpo’). animar ({scrollTop: 0}, 1000); $ (‘html, documentElement’).animate ({scrollTop: 0}, 1000); $ (‘. cuerpo-contenedor’).animate ({scrollTop: 0}, 1000); }
Explicación: EN «La función «topfunction» define la acción que debe realizar el botón cuando se hace clic en él. La velocidad de desplazamiento se establece en 1000 ms. Este valor proporciona un desplazamiento suave y lento para el usuario.
Personalización: Puedes jugar con la velocidad de desplazamiento (1000).
Puntos de marcado:
- No inserte el script internamente. Como se explica en esta página, siempre cree una carpeta de secuencias de comandos separada y vincule la secuencia de comandos deseada a MasterPage. Este paso debe tomarse para evitar el problema mencionado en la siguiente sección.
- El script se puede abrir y editar en MadCap Flare. Pero descubrí que editar el script directamente en MadCap Flare a veces corrompe el script. Para evitar esto, inicie sesión en el script fuera de su proyecto en su sistema local. Ábralo y edítelo usando su editor de código preferido.
botón CSS
Debe usar CSS para diseñar el botón. Ingrese el código a continuación en su hoja de estilo principal.
/* Custom Scroll Button */
#myBtn
{
display: none;
position: fixed;
bottom: 10px;
right: 27px;
z-index: 99;
font-size: 1rem;
border: none;
color: #fff;
background-color: #1797BE ;
cursor: pointer;
padding: 0.625rem 0.6875rem 0.5rem 0.6875rem;
border-radius: 3px;
}
#myBtn:hover
{
background-color: #537f99 ;
}
Botón de explicación de CSS y consejos de personalización
pantalla: ninguno;
Explicación: El botón no será visible al principio.
Personalización: No necesariamente.
posición: fija; abajo: 10px; derecha: 27px;
Explicación: El botón está en una posición fija, determinada por los valores «abajo» y «derecha».
personalización: Puede cambiar los valores «abajo» y «derecha» según sea necesario.
índice z: 99;
Explicación: El botón está dispuesto en todos los elementos. z-index solo funciona con elementos posicionados.
personalización: No necesariamente.
tamaño de fuente: 1 rem; límite: ninguno; color: #fff;
Explicación: El tamaño del ícono de Font Awesome se puede cambiar usando el tamaño de fuente. Font Awesome hereda cualquier conjunto de colores bajo «color».
Personalización: El tamaño y el color se pueden cambiar según los requisitos.
color de fondo: #1797BE!importante; cursor: puntero; revestimiento: 0,625 rem 0,6875 rem 0,5 rem 0,6875 rem; radio del borde: 3px;
Explicación: Establezca el color de fondo del botón, el cursor como un puntero de dedo, el relleno y el radio del borde (para dar bordes ligeramente redondeados al botón).
Personalización: Cambie los valores según sea necesario.
#myBtn: mantenga presionado el cursor del mouse {background-color: # 537f99! importante; }
Explicación: El botón cambia de color a azul oscuro cuando colocas el cursor encima.
Personalización: Cambie el color según sea necesario.
Conclusión
Puede personalizar el botón de desplazamiento hacia arriba con sus valores y requisitos. Si quieres jugar con valores de estilo CSS, te recomiendo probarlo en la hoja de estilo en Salida carpeta y ver el resultado en su navegador en lugar de generar una salida cada vez. Este método ahorra mucho tiempo. Sin embargo, no funcionará para código Javascript y necesita generar la salida para ver el resultado.
¡Tómate un momento para votar!
Referencias
Este contenido es preciso y verdadero al leal saber y entender del autor y no pretende reemplazar el consejo oficial e individualizado de especialista calificado.
© 2022 Dhanya V
