单击带有哈希标签的箭头时页面滚动
[英]Page scroll on click of an arrow which has hash tag
问题描述
Am looking for a jquery script to 'animate/scroll' within a page, when clicked on an arrow which 'hash' tag: 
当我在页面上单击“ hash”标签的箭头时，正在寻找一个jquery脚本来“动画/滚动”页面：
Below is the arrow code am placing above a background-image in html 下面是放置在html中背景图片上方的箭头代码
<div style="margin-top:380px;">
<a href="#transparency">
<div class="arrow-down-light-blue"></div>
</a>
</div>
Javascript in html page HTML页面中的Javascript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Could any please help me with providing a jquery script for this one? 有什么可以帮助我为此提供一个jquery脚本的吗？
2 个解决方案
解决方案1
0 已采纳 2015-01-01 13:42:06
Use below code Use .ready() function to bind click event and use .scrollTop() to scroll down to the desire HTML element 使用下面的代码使用.ready（）函数绑定click事件，并使用.scrollTop（）向下滚动到所需的HTML元素
Change your HTML as below 如下更改HTML
<div style="margin-top:380px;">
<a id="anchorID" class="anchorClick" href="#transparency">
<div class="arrow-down-light-blue">Click here</div>
</a>
</div>
<div style="height:500px"></div>
<div id="transparency"> your transparency div here </div>
<div style="margin-top:380px;">
<a id="anchorID1" class="anchorClick" href="#transparency1">
<div class="arrow-down-light-blue">Click here</div>
</a>
</div>
<div style="height:500px"></div>
<div id="transparency1" style="margin-bottom:100px;"> your transparency.1 div here </div>
Javascript Java脚本
$(document).ready(function(){
$(".anchorClick").click(function(){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top // UPDATED LINE
}, 2000);
});
});
** And DO NOT forget to add jQuery Library at the top of the HTML page in <head> tag :) ** 并且不要忘记在<head>标记的HTML页面顶部添加jQuery库:)
Updated Answer : use ClassName selector 更新的答案：使用ClassName选择器
解决方案2
0 2015-01-01 13:56:54
took out the divs with the margin top for demonstartion, this works on classes so is expandable. 取出divs边距为演示的顶部，这适用于类，因此可以扩展。 edited to add back to top 编辑添加回顶部
$(document).ready(function(){ $(".anchor").click(function(e){ $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000); }); });
#top{background-color:red;} #middle{background-color:yellow;} #bottom{background-color:green;} div.block{height:400px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="toppage"></div> <a class="anchor" href="#top"> <div class="arrow-down-light-blue">top</div> </a> <a class="anchor" href="#middle"> <div class="arrow-down-light-blue">middle</div> <a class="anchor" href="#bottom"> <div class="arrow-down-light-blue">bottom</div> </a> <div class="block" id="top">The top <a class="anchor" href="#toppage"> Back to top</a> </div> <div class="block" id="middle">The middle <a class="anchor" href="#toppage"> Back to top</a> </div> <div class="block" id="bottom">The bottom <a class="anchor" href="#toppage"> Back to top</a> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.