热门搜索 :
汽车文化
您的当前位置:首页正文

JQuery简单实现锚点链接的平滑滚动_jquery

2023-12-05 来源:学车网

一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果:

比如,这里我们将通过点击标签跳转到 id为content的指定位置那里。

然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章。最好将此div放在靠后的位置,这样效果就很明显一点,如果只是测试一下这个效果,可以用简单粗暴的方法,在其前面放很多个

标签即可。

HTML5

html5html5html5

标签: HTML52015年4月19日

最后就是用JQuery来实现平滑过渡的效果了:

搞定了!

下面我们来继续改进一下,

改进后的代码的好处是点击锚点链接平滑滚动到锚点,并且浏览器URL后缀不带有锚点字样,使用的过程中基本不用修改以上代码即可实现。

以上所述就是本文的全部内容了,希望大家能够喜欢。

小编还为您整理了以下内容,可能对您也有帮助:

jQuery实现平滑滚动页面到指定锚点链接的方法

平滑滚动是指在页面内滚动的行为,在网页中,我经常会看到诸如“返回顶部”之类的按钮,这就是使用平滑滚动实现的,接下来的这篇文章我们就来介绍使用jQuery实现平滑滚动的方法。

JavaScript

如何实现平滑滚动

JavaScript的代码如下

$(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; });});

上述代码可以实现平滑滚动,你可以通过改变“speed”来更改滚动速度,另外,通过最后返回“false”,我们尽量不影响URL。

由于WordPress与“$”冲突,我们将“$”更改为“jQuery”,下面我们使用jQuery的动画标签来实现平滑滚动。

我们来看具体的示例

代码如下

HTML代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $('a[href^="#"]').click(function() { var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> <title>jQuery</title> </head> <body> <h1 id="index">目录</h1> <ul> <li><a href="#1">sample1</a></li> <li><a href="#2">sample2</a></li> <li><a href="#3">sample3</a></li> <li><a href="#4">sample4</a></li> </ul> <div id="1"> <h2>sample1</h2> <a class="button" href="#index">Topへ</a> </div> <div id="2"> <h2>sample2</h2> <a class="button" href="#index">Topへ</a> </div> <div id="3"> <h2>sample3</h2> <a class="button" href="#index">Topへ</a> </div> <div id="4"> <h2>sample4</h2> <a class="button" href="#index">Topへ</a> </div> </body></html>

CSS代码

div{ height: 1000px;}

运行结果如下:只截图了上面的部分,下面还有sample1、sample2、sample3、sample4。

JavaScript

jQuery实现平滑滚动页面到指定锚点链接的方法

平滑滚动是指在页面内滚动的行为,在网页中,我经常会看到诸如“返回顶部”之类的按钮,这就是使用平滑滚动实现的,接下来的这篇文章我们就来介绍使用jQuery实现平滑滚动的方法。

JavaScript

如何实现平滑滚动

JavaScript的代码如下

$(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; });});

上述代码可以实现平滑滚动,你可以通过改变“speed”来更改滚动速度,另外,通过最后返回“false”,我们尽量不影响URL。

由于WordPress与“$”冲突,我们将“$”更改为“jQuery”,下面我们使用jQuery的动画标签来实现平滑滚动。

我们来看具体的示例

代码如下

HTML代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="sample.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function(){ $('a[href^="#"]').click(function() { var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> <title>jQuery</title> </head> <body> <h1 id="index">目录</h1> <ul> <li><a href="#1">sample1</a></li> <li><a href="#2">sample2</a></li> <li><a href="#3">sample3</a></li> <li><a href="#4">sample4</a></li> </ul> <div id="1"> <h2>sample1</h2> <a class="button" href="#index">Topへ</a> </div> <div id="2"> <h2>sample2</h2> <a class="button" href="#index">Topへ</a> </div> <div id="3"> <h2>sample3</h2> <a class="button" href="#index">Topへ</a> </div> <div id="4"> <h2>sample4</h2> <a class="button" href="#index">Topへ</a> </div> </body></html>

CSS代码

div{ height: 1000px;}

运行结果如下:只截图了上面的部分,下面还有sample1、sample2、sample3、sample4。

JavaScript

html怎么给锚点加滑动效果?

使用jquery的动画做滑动效果;

obj为需要做跳转到锚点的a标签对象

400 为滑动的速度(可以改成你需要的速度,单位是毫秒)

/*

*锚点点击跳转

*/

var AnchorClick = function (obj) {

    var href = $(obj).attr("href");

    var pos = $(href).offset().top;

    $("html,body").animate({ scrollTop: pos }, 400);

};

jquery怎么实现点击按钮之后网页滑动到锚链接

$(function(){

  $(".click").click(function(){

    $(window).scrollTop(0);

  })

})//这个是直接跳转到顶部

$(function(){

  $(".click").click(function(){

    $("html,body").animate({scrollTop:0},500);

  })

})//这个是缓慢返回顶部的效果

前面需要引入jq库,click是点击的那个标签

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top