简单的jQuery滚动来上下滚动页面…？
我正在寻找一种方法来包括一个简单的幻灯片效果，当你点击一个本地锚的链接上或下的页面。
如果可能的话，我希望你有一个像这样的链接的东西：
<a href="#nameofdivetc">link text, img etc.</a> 也许添加了一个类，所以你知道你想要这个链接是一个滑动链接：
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
然后，如果这个链接被点击，页面只是向上或向下滑动到所需的地方（可以是一个div，标题，页面顶部等）。
有点像我在这个网站http://www.adriancrellin.co.uk/上使用的 ，但是这是一个很好的时间，我现在正在为客户做，并想知道是否有更好或更简单的解决scheme在那里。
任何想法都会很棒！
这是我以前的，不记得我现在从哪里得到的代码，但它似乎工作相当不错，任何更好的解决scheme将是伟大的，但：o）
$(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演示 。
样品
function scrollToAnchor(aid){ var aTag = $("a[name='"+ aid +"']"); $('html,body').animate({scrollTop: aTag.offset().top},'slow'); } scrollToAnchor('id3');
更多信息
- jsFiddle示范
- jQuery.offset（）
- jQuery.animate（）
function scroll_to_anchor(anchor_id){ var tag = $("#"+anchor_id+""); $('html,body').animate({scrollTop: tag.offset().top},'slow'); }
这使我的生活变得如此简单。 你基本上把你的元素id标签和它的卷轴给它，而没有太多的代码
http://balupton.github.io/jquery-scrollto/
在Javascript中
$('#scrollto1').ScrollTo();
在你的HTML
<div id="scroollto1">
在这里，我一直在页面上
假设你的href属性链接到一个具有相同名称的标签id的div （像往常一样），你可以使用下面的代码：
HTML
<a href="#goto" class="sliding-link">Link to div</a> <div id="goto">I'm the div</div>
JAVASCRIPT – （jquery）
$(".sliding-link").click(function(e) { e.preventDefault(); var aid = $(this).attr("href"); $('html,body').animate({scrollTop: $(aid).offset().top},'slow'); });
我坚持我的原始代码，也包括使用这个代码，并从这里一点点'回到顶部'链接淡入淡出：
http://webdesignerwall.com/tutorials/animated-scroll-to-top
效果很好 ：）
你也应该考虑目标有一个填充，因此使用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 }); })
你可能想要添加offsetTop和scrollTop值，以防止你animation不是整个页面，而是一些嵌套的内容。
例如：
var itemTop= $('.letter[name="'+id+'"]').offset().top; var offsetTop = $someWrapper.offset().top; var scrollTop = $someWrapper.scrollTop(); var y = scrollTop + letterTop - offsetTop this.manage_list_wrap.animate({ scrollTop: y }, 1000);
以下解决scheme为我工作：
$("a[href^=#]").click(function(e) { e.preventDefault(); var aid = $(this).attr('href'); console.log(aid); aid = aid.replace("#", ""); var aTag = $("a[name='"+ aid +"']"); if(aTag == null || aTag.offset() == null) aTag = $("a[id='"+ aid +"']"); $('html,body').animate({scrollTop: aTag.offset().top}, 1000); } );
SS慢速滚动
这个解决scheme不需要锚点标签，但是你当然需要匹配你的html中的目标元素id的菜单button（例子中的任意属性“ss”）。
ss="about"带你到id="about"
$('.menu-item').click(function() { var keyword = $(this).attr('ss'); var scrollTo = $('#' + keyword); $('html, body').animate({ scrollTop: scrollTo.offset().top }, 'slow'); });
.menu-wrapper { display: flex; margin-bottom: 500px; } .menu-item { display: flex; justify-content: center; flex: 1; font-size: 20px; line-height: 30px; color: hsla(0, 0%, 80%, 1); background-color: hsla(0, 0%, 20%, 1); cursor: pointer; } .menu-item:hover { background-color: hsla(0, 40%, 40%, 1); } .content-block-header { display: flex; justify-content: center; font-size: 20px; line-height: 30px; color: hsla(0, 0%, 90%, 1); background-color: hsla(0, 50%, 50%, 1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="menu-wrapper"> <div class="menu-item" ss="about">About Us</div> <div class="menu-item" ss="services">Services</div> <div class="menu-item" ss="contact">Contact</div> </div> <div class="content-block-header" id="about">About Us</div> <div class="content-block"> Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle. That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle. </div> <div class="content-block-header" id="services">Services</div> <div class="content-block"> Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle. That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle. </div> <div class="content-block-header" id="contact">Contact</div> <div class="content-block"> Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle. That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle. </div>
$(function() { $('a#top').click(function() { $('html,body').animate({'scrollTop' : 0},1000); }); });
在这里testing：
