테스트 사이트 - 개발 중인 베타 버전입니다

다른페이지로 이동후 anchor 이동방법. 다시 질문드려요. 채택완료

크림빵1 3년 전 조회 2,627

우선 index.php 페이지에

 

    <div id="asideSwipe">
        <div class="imgWrap">
            <ul>
                <li class="scrollObj" data-scroll="top" data-delay="200">
                    <a href="<?php echo G5_THEME_URL ?>/page/a.php#p2" target=""> <--여기에 링크
                        <div class="imgArea">
                        <img src="<?php echo G5_THEME_IMG_URL ?>/aside_banner1.jpg" alt="Image 1" />
                        </div>
                        <div class="mask"></div>
                        <div class="caption">
                            <h2></h2>
                            <p class="desc"></p>
                            <p class="date"><span class="main_bauuton5"></span></p>
                        </div>
                    </a>
                </li>

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

page/a.php 페이지에

 

<section class="wr-block" data-block-type="features" data-id="15">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 text-left">
        <a id="p1"></a> <-- 여기에 앵커 삽입
        <h1>제목 </h1>
        <p class="text-h3"></p>
        <p class="text-h3"></p>
        <img alt="image" class="img-fluid mt-5" src="<?php echo G5_THEME_IMG_URL ?>/img_plus/profile_1.png" id="yisang">
      </div>
    </div>

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ


이런식으로 html를 넣어서 테스트해보는데 

다른페이지로 이동하면서 앵커에 포커싱이 되지 않네요..

제가 어떤 실수를 한것일까요?

 

그냥 html에서 심플하게
<a href="1/d.html#p1" target="">다른페이지 앵커 이동</a>

ㅡㅡㅡㅡ

  위치 이동

<a id="p1"></a>

이런식으로 로컬에서 테스트하면 잘 이동됩니다.

 

고수님들 답변 부탁드립니다.

 

 

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

답변 3개

채택된 답변
+20 포인트
3년 전

일단 p2 로 이동했는데 p1 앵커로?

오타가 아니라면 안될이유가 없어 보입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 6개

크림빵1
3년 전
답변감사합니다. ^^ p1 ~ p6까지 사용하는데 예시로 가져와서 오타가 난것입니다.
백수1995
3년 전
주소창에는 어떻게 표시되나요?
크림빵1
3년 전
앵커 링크를 클릭하면
http://xxxxxx.com/theme/테마명/page/artists.php#p1

이렇게 표시되면서 맨 상단으로 포커싱이 됩니다.
백수1995
3년 전
chrome 이라면 다음의 코드를 이용해 보세요
[code]
jQuery(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
[/code]

참조 : https://community.wpbeaverbuilder.com/t/anchor-links-to-another-page-not-working-in-chrome/10557/8
크림빵1
3년 전
감사합니다.
알려주신 스크립트 사용하니 우선 크롬 엣지에서는 잘 됩니다.
정말 고맙습니다.
우선 잘 몰라서 index.php와 해당페이지에 같이 넣었습니다.
백수1995
3년 전
코드 보시면 아시겠지만 렌더링과 관련된 버그? 라고 볼수 있고
원래 대로라면 옮기는 페이지에만 있으면 되겠네요

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

3년 전

 <a id="p1"></a>-->  <a id="p1" name='p1'></a> 이렇게 해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

크림빵1
3년 전
답변 감사합니다.

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

3년 전

일단 소스만 봐서는 p1인데 위에 링크는 p2를 하신거 같네요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

크림빵1
3년 전
답변감사합니다. ^^ p1 ~ p6까지 사용하는데 예시로 가져와서 오타가 난것입니다.

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

답변을 작성하려면 로그인이 필요합니다.

로그인