들레아빠

상단 스크롤 버튼 업그레이드

33282748_1705816506.758.png33282748_1705816517.1135.png

 

/templates/taeho/base.html line 305~
[code]
  // 상단 스크롤 버튼
    $(function() {
        $("#top_btn").on("click", function() {
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
    });

=>

  // 상단 스크롤 버튼
  jQuery(function($) {
    var $elem = $("html, body");
    var where = 0;
    $("#top_btn").on("click", function() {
      var windowHeight = $(document).height() - $(window).height();
      var winhalf = windowHeight * 0.5;

      if ($elem.scrollTop() < winhalf) {
        $elem.animate({ scrollTop: $elem.prop("scrollHeight") }, 400);
        where = 1;
      } else {
        $elem.animate({ scrollTop: 0 }, 400);
        where = 0;
      }
    });

    $(document).ready(function() {
      $(window).scroll(function() {
        var windowHeight = $(document).height() - $(window).height();
        var winhalf = windowHeight * 0.5;
        var scrollPos = $(document).scrollTop();
        var scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
        var $buttonTop = $("#top_btn");

        if (scrollPos > winhalf) {
          $buttonTop.css({
            "border-color": "red",
            "line-height": "15px",
            "color": "red"
          }).html("<i class='fa fa-arrow-up' aria-hidden='true'></i>");
        } else {
          $buttonTop.css({
            "border-color": "blue",
            "line-height": "15px",
            "color": "blue"
          }).html("<i class='fa fa-arrow-down' aria-hidden='true'></i>");
        }
        if ($("#scroll_percentage").length === 0) {
          $("<p id=\'scroll_percentage\'></p>").appendTo($buttonTop);
        }
        $("#scroll_percentage").text(Math.round(scrollPercent));

      });
    });
  });
[/code]

|

댓글 2개

적용해보니 아주 잘 작동하네요. 감사합니다.

@sinbi님 감사 합니다.

댓글을 작성하시려면 로그인이 필요합니다.

그누보드6 팁자료실

그누보드6, 파이썬에 대한 팁과 자료를 올려주세요. 그누보드6 실서비스를 위한 웹서버 설정

+
제목 글쓴이 날짜 조회
2년 전 조회 1,376
2년 전 조회 1,229
2년 전 조회 1,458
2년 전 조회 1,102
2년 전 조회 971
2년 전 조회 1,232
2년 전 조회 894
2년 전 조회 1,339
2년 전 조회 849
2년 전 조회 711
2년 전 조회 1,188
2년 전 조회 1,256
2년 전 조회 833
2년 전 조회 1,306
2년 전 조회 968
2년 전 조회 1,924
2년 전 조회 799
2년 전 조회 1,217
2년 전 조회 1,534
2년 전 조회 1,113
2년 전 조회 1,457
2년 전 조회 1,306
2년 전 조회 1,472
2년 전 조회 1,051
2년 전 조회 2,174
2년 전 조회 1,977
2년 전 조회 1,226
2년 전 조회 724
2년 전 조회 916
2년 전 조회 2,535