페이지의 위 또는 아래에서 로컬 앵커에 대한 링크를 클릭 할 때 슬라이드 효과를 포함시키는 방법을 찾고 있습니다.
나는 당신이 그렇게 링크가있는 것을 원합니다 :
<a href="#nameofdivetc">link text, img etc.</a>
아마도 클래스가 추가 되었으므로이 링크가 슬라이딩 링크가되고 싶다는 것을 알 수 있습니다.
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
그런 다음이 링크를 클릭하면 페이지가 위 또는 아래로 이동하여 원하는 위치 (div, 제목, 페이지 상단 등)가 될 수 있습니다.
이것이 내가 이전에했던 것입니다 :
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
});
});
답변
기술
다음을 사용하여이 작업을 수행 할 수 있습니다 jQuery.offset()
와 jQuery.animate()
.
jsFiddle Demonstration을 확인하십시오 .
견본
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('id3');
추가 정보
답변
href 속성이 동일한 이름을 가진 태그 ID를 가진 div에 연결 한다고 가정하면 다음 코드를 사용할 수 있습니다.
HTML
<a href="#goto" class="sliding-link">Link to div</a>
<div id="goto">I'm the div</div>
자바 스크립트-(Jquery)
$(".sliding-link").click(function(e) {
e.preventDefault();
var aid = $(this).attr("href");
$('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});
답변
이것은 내 인생을 훨씬 쉽게 만들었습니다. 기본적으로 요소 id 태그와 많은 코드없이 스크롤합니다.
http://balupton.github.io/jquery-scrollto/
자바 스크립트에서
$('#scrollto1').ScrollTo();
귀하의 HTML에서
<div id="scroollto1">
여기에 나는 페이지 끝까지
답변
function scroll_to_anchor(anchor_id){
var tag = $("#"+anchor_id+"");
$('html,body').animate({scrollTop: tag.offset().top},'slow');
}
답변
또한 대상에 패딩이 있으므로 position
대신 을 사용하는 것을 고려해야합니다 offset
. 대상과 겹치지 않으려는 잠재적 탐색 모음을 설명 할 수도 있습니다.
const $navbar = $('.navbar');
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
const scrollTop =
$($(this).attr('href')).position().top -
$navbar.outerHeight();
$('html, body').animate({ scrollTop });
})
답변
jQuery를 사용한 나의 접근 방식은 모든 임베디드 앵커 링크를 즉시 점프하는 대신 슬라이드하게 만듭니다.
Santi Nunez 의 답변과 실제로 비슷 하지만 더 안정적입니다. 입니다.
지원하다
- 다중 프레임 워크 환경.
- 페이지로드가 완료되기 전에
<a href="#myid">Go to</a>
<div id="myid"></div>
// Slow scroll with anchors
(function($){
$(document).on('click', 'a[href^=#]', function(e){
e.preventDefault();
var id = $(this).attr('href');
$('html,body').animate({scrollTop: $(id).offset().top}, 500);
});
})(jQuery);
답변
나는 원래 코드를 고수 하고이 코드를 사용하는 ‘back-to-top’링크에 페이드를 포함 시켰으며 여기에서도 약간의 코드를 사용했습니다.
http://webdesignerwall.com/tutorials/animated-scroll-to-top
잘 작동합니다 🙂