HEROJOON 블로그(히로블)

Jquery Scroll값 위치로 이동하기(aimate 움직임 효과 이용.) 본문

Frontend

Jquery Scroll값 위치로 이동하기(aimate 움직임 효과 이용.)

herojoon 2020. 2. 23. 21:01
반응형

1. 환경

  • Framework : Spring Boot 2.2.4
  • Build : Gradle 5.2
  • JDK : JDK8
  • Front : JSP
  • Rendering : Server Side Rendering

2. 목표

: 리스트 페이지에서 상세 페이지 이동후 다시 리스트 페이지로 돌아올 때 scroll값을 기억할 수 있게 한다.

더보기

<리스트 페이지>

<상세 페이지>

<리스트로 돌아왔을 때 이전 scroll값으로 이동됨>

3. Jquery scrollTop정리

3-1. Jquery CDN 추가

: Jquery scrollTop을 사용하기 위해서 필요한 Jquery lib를 JSP페이지에 추가해준다.

https://code.jquery.com/

 

3-2. 스크롤 위치 기억

  $('html, body').animate({scrollTop:위치값 넣어줌}, 'duration값 넣어줌')

 

  1) scroll 위치 지정 방법 두가지

    : animate를 이용해서 scroll 위치를 이동시켜 주기 때문에 움직임이 보이며 스크롤이 이동된다.

 

    방법1) scroll위치값으로 scroll 위치 지정

      $('html, body').animate({scrollTop:scroll값 넣어줌}, 'slow');


    방법2) id값으로 scroll 위치 지정

      $('html, body').animate({scrollTop:$(#scroll ID값 넣어줌).position().top}, 'slow');

 

  2) Jquery scrollTop의 duration값 설정 (= scroll에 위치값을 넣었을 때 동작하는 speed값.)
    : default (400 millisecond), fast (200 millisecond), slow (600 millisecond), 직접지정 가능

 

 

3-3. 스크롤 값 가져오기

  $(window).scroll(function () {
    var scrollHeight = $(document).scrollTop();
  );

4. 코드 작성 (by herojoon)

4-1. Controller 작성

package com.example.demojsp.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * jquery scroll 테스트
 * by herojoon
 * date 2020-02-23
 */
@Controller
@RequestMapping("scroll")
public class ScrollTestController {

    /**
     * Jquery Scroll을 테스트하기위한 리스트 페이지 이동 함수
     * @param no
     * @param scrollHeight
     * @return
     */
    @GetMapping(value = "list")
    public ModelAndView scrollListPage(
            @RequestParam(value = "no", defaultValue = "0", required = false) Integer no,
            @RequestParam(value = "scrollHeight", defaultValue = "0", required = false) Integer scrollHeight) {
        // sample list data
        List<Map<String, Object>> datas = new ArrayList<>();
        for (int i=0; i<31; i++) {
            Map<String, Object> data = new HashMap<>();
            data.put("no", i+1);
            data.put("name", "user" + (i+1));
            data.put("memo", "hello " + (i+1));
            datas.add(data);
        }

        ModelAndView mav = new ModelAndView();
        mav.setViewName("scroll/list");
        mav.addObject("datas", datas);
        mav.addObject("no", no);
        mav.addObject("scrollHeight", scrollHeight);
        return mav;
    }

    /**
     * Jquery Scroll을 테스트하기위한 상세 페이지 이동 함수
     * @param no
     * @param name
     * @param memo
     * @param scrollHeight
     * @return
     */
    @GetMapping(value = "detail")
    public ModelAndView scrollDetailPage(
            @RequestParam(value = "no") Integer no,
            @RequestParam(value = "name") String name,
            @RequestParam(value = "memo") String memo,
            @RequestParam(value = "scrollHeight", defaultValue = "0", required = false) Integer scrollHeight) {

        ModelAndView mav = new ModelAndView();
        mav.setViewName("scroll/detail");
        mav.addObject("no", no);
        mav.addObject("name", name);
        mav.addObject("memo", memo);
        mav.addObject("scrollHeight", scrollHeight);
        return mav;
    }
}

 

4-2. JSP 페이지 생성

1) 리스트 페이지 (dir : scroll/list.jsp)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <!-- scroll 위치를 명확히 보기 위하여 style을 추가 -->
    <style type="text/css">
        table {
            width: 100%;
            border: 1px solid black;
        }
        td {
            padding: 10px 10px 10px 10px;
            border-top: 1px solid black;
        }
    </style>
    <title>Scroll Test를 위한 List Page</title>
</head>
<body>
    <h1>Scroll Test를 위한 List Page</h1>
    <br><br>

    <table>
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>Memo</th>
        </tr>
        <c:forEach var="data" items="${datas}">
            <tr id="scroll_id_${data.no}" onclick="moveDetailPage(${data.no}, '${data.name}', '${data.memo}')">
                <td><c:out value="${data.no}" /></td>
                <td><c:out value="${data.name}" /></td>
                <td><c:out value="${data.memo}" /></td>
            </tr>
        </c:forEach>
    </table>

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script type="text/javascript">
    var no = ${no};
    var scrollHeight = ${scrollHeight};

    /**
     * init function
     * 1. 동작 : scroll 위치 지정하기
     *    ## scroll 위치 지정 방법 두가지 ##
     *    방법1) scroll값으로 scroll 위치 지정
     *    방법2) id값으로 scroll 위치 지정
     * 2. 설명 : jquery scrollTop
     *    $('html, body').animate({scrollTop:위치값 넣어줌}, 'duration값 넣어줌')
     *    ## duration값 (scroll에 위치값을 넣었을 때 동작하는 speed값.)
     *    : default (400 millisecond), fast (200 millisecond), slow (600 millisecond), 직접지정 가능
     * 3. scroll값 위치 테스트 시에는 아래 1.과 2. 둘 중 하나의 주석만 풀고 테스트 할 것.
     */
    $(document).ready(function() {
        console.log("##scrollHeight : " + scrollHeight)

        // 1. scroll위치 지정방법1 : scroll값으로 scroll 위치 지정
        $('html, body').animate({scrollTop:scrollHeight}, 'fast');

        // 2. scroll위치 지정방법2 : id값으로 scroll 위치 지정
        /*if (no > 0) {
            var scrollId = "#scroll_id_" + no;
            $('html, body').animate({scrollTop:$(scrollId).position().top}, 'fast');
        }*/
    });

    /**
     * scroll이 움직일때마다 scroll값을 전역변수에 넣어줌.
     */
    $(window).scroll(function () {
        scrollHeight = $(document).scrollTop();
        if (scrollHeight != null && scrollHeight != '' && scrollHeight > 0) {
            scrollHeight = Math.round(scrollHeight)  // scroll값은 소수점까지 있을 수 있기 때문에 반올림 처리
        }
    });

    /**
     * move detail page
     * @param no
     * @param name
     * @param memo
     */
    function moveDetailPage(no, name, memo) {
        location.href = "/scroll/detail?no=" + no
            + '&name=' + encodeURIComponent(name)
            + '&memo=' + encodeURIComponent(memo)
            + '&scrollHeight=' + scrollHeight
    }
</script>
</body>
</html>

 

2) 상세 페이지 (dir : scroll/detail.jsp)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Scroll Test를 위한 Detail Page</title>
</head>
<body>
    <h1>Scroll Test를 위한 Detail Page</h1>
    <br><br>

    <div>
        <span>no : ${no}</span><br>
        <span>name : ${name}</span><br>
        <span>memo : ${memo}</span><br>
        <span>scroll값 : ${scrollHeight}</span>
    </div>
    <br><br>

    <div>
        <button onclick="moveListlPage()">scroll 위치 확인하기</button>
    </div>

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script type="text/javascript">
    /**
     * move list page
     */
    function moveListlPage() {
        location.href = "/scroll/list?no=" + ${no}
            + "&scrollHeight=" + ${scrollHeight};
    }
</script>
</body>
</html>

 

반응형
Comments