하/중/상 스크롤 > 그누보드5 팁자료실

그누보드5 팁자료실

하/중/상 스크롤 정보

하/중/상 스크롤

본문

1926146622_1518184125.0543.png

<style>
.go-up {position: fixed;right:25px;bottom:158px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 16px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-up:hover{color:rgba(0,0,255,0.6);}
.go-center {position: fixed;right:25px;bottom:135px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 10px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-center:hover{color:rgba(0,0,255,0.6);}
.go-down {position: fixed;right:25px;bottom:120px;border-radius: 5px;color: rgba(80,80,80,0.3);text-align: center;width: 25px;height: 25px;font-size: 16px;background-color:rgba(80,80,80,0.0);z-index: 999;display: none;}
.go-down:hover{color:rgba(0,0,255,0.6);}
</style>

<a href="#" class="go-up"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#" class="go-center"><i class="fa fa-circle" aria-hidden="true"></i></a>
<a href="#" class="go-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
    $( window ).scroll( function() {
        if ($(this).scrollTop() > 100 ) {
            $('.go-up').fadeIn();
   $('.go-center').fadeIn();
   $('.go-down').fadeIn();
        } else {
            $('.go-up').fadeOut();
   $('.go-center').fadeOut();
   $('.go-down').fadeOut();
        }
 });
 });
 
    $(function() {
        $(".go-up").on("click", function(e) {
            e.preventDefault();
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
        $(".go-center").on("click", function(e) {
            e.preventDefault();
            var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
            $("html, body").animate({scrollTop:middle_pos}, '500');
            return false;
        });
        $(".go-down").on("click", function(e) {
         e.preventDefault();
         var scrollBottom = $("html,body").scrollTop + $("html,body").height();
            $("html, body").animate({scrollTop:$(document).height()}, '500');
            return false;
        });
    });
</script>

추천3

댓글 전체

감사합니다. 제가 적용을 잘못해서 그런지...
go-center를 클릭하면 중간(중단)으로 가지 않고 go-up처럼 그냥 맨위로 올라가버리는군요~
 var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
위의 내용을 수정하여야 할 것 같은데...실력이 없어서...ㅜ
잘 사용하겠습니다.
1. 크롬과 네이버 웨일은 go-center를 클릭하면 중간(중단)으로 가지 않고 go-up처럼 그냥 맨위로 올라가버리는군요~  익스는 잘 됩니다.

2. 그리고 화면을 확대하면 화살표가 왼쪽으로 이동하여 내용이 있는 곳으로 들어갑니다.
확대를 하거나 축소를 해도 그 자리에 있도록 하려면...
.go-up {position:fixed;right:25px;bottom:158px;를
.go-up {position:fixed;right:50%;margin-right:-570px;bottom:158px; 이런 식으로 사용해야 할 것 같습니다.
전체 1,225 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT