CSS - Boton Ir arriba , personalizacion

 
Vista:

Boton Ir arriba , personalizacion

Publicado por Kienre (1 intervención) el 08/01/2019 01:38:26
Estoy en creación de una pagina web , y ya creé el botón de ir arriba.
Mi duda es si puedo establecer un limite al boton ,para q desde cierto punto se quede estático, ya que al final de la pagina tengo un footer, y no quiero que el botón se sobreponga.

A continuación les muestro los códigos.

js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
	$('.up').hide();
	$(window).scroll(function(){
		if ($(this).scrollTop()>100) {
			$('.up').fadeIn('1000');
		}else{
			$('.up').fadeOut('1000');
		}
	});
 
	$('.up').click(function(){
		$('body,html').animate({
			scrollTop:0
		},150);
	});
});

css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.up{
	width: 35px;
	height: 35px;
	padding:10px;
	background: #000;
	color: #FF851B; 
	font-size: 30px;
	cursor: pointer;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 20px;
	right: 20px;
	border-bottom: 2px solid #313131;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 574
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Boton Ir arriba , personalizacion

Publicado por ScriptShow (116 intervenciones) el 11/01/2019 12:38:08
Saludos,

lo más sencillo es cambiar esta parte del CSS:

1
bottom: 20px;

Por:

1
bottom: 200px;

Pon un valor que supere el alto total del Footer.

Espero que sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar