HEROJOON 블로그(히로블)

Jquery Scroll값 위치로 이동하기(window.scrollTo) 본문

카테고리 없음

Jquery Scroll값 위치로 이동하기(window.scrollTo)

herojoon 2020. 2. 27. 23:31
반응형

1. 환경

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

2. 목표

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

더보기

<리스트 페이지>

<상세 페이지>

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

<리스트 페이지>

<상세 페이지>

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

3. window.scrollTo를 이용해서 scroll 위치 지정

3-1. 스크롤 위치 기억

  // LocalStorage에 스크롤 위치값 저장  

  localStorage.setItem("scrolly", scrollY)

 

3-2. 스크롤 값으로 위치 지정

  var scrollY = localStorage.getItem("scrolly"); // LocalStorage에 저장된 scroll Y의 위치값 조회.
  window.scrollTo(0, scrollY);  // scroll 위치 지정 window.scrollTo(scrollX값, scrollY값)

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 테스트 (animate효과없이 원하는 scroll위치에 바로 적용됨)
 * by herojoon
 * date 2020-02-27
 */
@Controller
@RequestMapping("scroll/position")
public class ScrollPositionController {

    /**
     * Jquery Scroll을 테스트하기위한 리스트 페이지 이동 함수
     * @return
     */
    @GetMapping(value = "list")
    public ModelAndView scrollListPage() {
        // 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/position/list");
        mav.addObject("datas", datas);
        return mav;
    }

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

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

 

4-2. JSP 페이지 생성

1) 리스트 페이지 (dir : scroll/position/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 style="cursor:pointer" 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 scrollHeight = 0;

    /**
     * scroll 위치 지정
     */
    $(document).ready(function() {
        var scrollY = localStorage.getItem("scrolly");  // LocalStorage에 저장된 scroll Y의 위치값 조회.
        if (scrollY != null && scrollY != '' && scrollY > 0) {
            window.scrollTo(0, scrollY);
        }
    });

    /**
     * scroll이 움직일때마다 scroll값을 전역변수에 넣어줌.
     */
    $(window).scroll(function () {
        scrollHeight = $(document).scrollTop();
    });

    /**
     * move detail page
     * @param no
     * @param name
     * @param memo
     */
    function moveDetailPage(no, name, memo) {
        localStorage.setItem("scrolly", scrollY);  // LocalStorage에 scroll Y의 위치값 저장.

        // 상세 페이지 이동
        location.href = "/scroll/position/detail?no=" + no
            + '&name=' + encodeURIComponent(name)
            + '&memo=' + encodeURIComponent(memo)
    }
</script>
</body>
</html>

 

2) 상세 페이지 (dir : scroll/position/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>
        <li>no : ${no}</li>
        <li>name : ${name}</li>
        <li>memo : ${memo}</li>
    </div>
    <br><br>

    <div>
        <button style="cursor:pointer" 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/position/list"
    }
</script>
</body>
</html>

 

반응형
저작자표시 비영리 변경금지
Comments