Skip to content

Instantly share code, notes, and snippets.

@butchi
Last active December 22, 2015 05:40
Show Gist options
  • Save butchi/0219d032b8daec9625d3 to your computer and use it in GitHub Desktop.
Save butchi/0219d032b8daec9625d3 to your computer and use it in GitHub Desktop.
IDが重複してもページ内ジャンプできるようにする方法 ref: http://qiita.com/butchi_y/items/9a1aa858a6eb64b2ee5e
$('.env-2#p')
$('.env-2').find('#p2');
$('[id="p2"]').eq(1)
$('[id="p2"]').eq(-1)
$('[id="p2"]:visible')
$('a[href^=#]').on('click', function() {
var targetId = $(this).attr('href').slice(1);
var selector = targetId ? '[id="' + targetId + '"]:visible' : 'html';
var $target = $(selector);
var dist = $target.offset().top;
$('html, body').animate({scrollTop: dist});
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>has duplicated</title>
<style>
.env-1 {
display: none;
}
</style>
</head>
<body>
<a href="#p1"></a>
<a href="#p2"></a>
<div class="env-1">
<p id="p1">この親のdivはPCだとか。</p>
<p id="p2">この親のdivはenだとか。</p>
</div>
<div class="env-2">
<p id="p1">この親のdivはSPだとか。</p>
<p id="p2">この親のdivはjaだとか</p>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment