单击具有哈希标记的箭头可滚动页面

Question

我在页面中寻找 jquery 脚本 'animate/scroll'，当单击 'hash' 标记的箭头时：

下面是 html

中放置在背景图像上方的箭头代码

<div style="margin-top:380px;">
    <a href="#transparency">
        <div class="arrow-down-light-blue"></div>
    </a>
</div>

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;
      }
    }
  });
});

任何人都可以帮我提供一个 jquery 脚本吗？

Answer 1

使用下面的代码使用 .ready() function to bind click event and use .scrollTop() 向下滚动到想要的 HTML 元素

将您的 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

$(document).ready(function(){
   $(".anchorClick").click(function(){
      $('html, body').animate({
       scrollTop: $($(this).attr('href')).offset().top // UPDATED LINE
      }, 2000);
   });
});

** 并且不要忘记在 HTML 页面顶部的 <head> 标签中添加 jQuery 库 :)

更新答案： 使用 ClassName 选择器

See the updated JS Fiddle here

Answer 2

取出带边距顶部的 div 进行演示，这适用于类，因此可扩展。编辑添加回顶部

$(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>

单击具有哈希标记的箭头可滚动页面

Page scroll on click of an arrow which has hash tag

html

javascript

jquery