jQuery下实现锚点链接的平滑滚动

最新推荐文章于 2023-06-30 12:05:19 发布

Sterope_

最新推荐文章于 2023-06-30 12:05:19 发布

阅读量748

点赞数

分类专栏： jQuery 文章标签： jquery 优化

本文链接：https://blog.csdn.net/Ssterope/article/details/52165106

版权

本文介绍了如何使用jQuery实现锚点链接的平滑滚动，以提升用户体验。通过选择器选取a链接，绑定click事件，利用offset()获取目标位置，animate()实现平滑运动，并阻止浏览器默认跳转。同时，强调了jQuery对象与DOM对象的区别及转换方法。

摘要由CSDN通过智能技术生成

在使用锚点的时候，默认是直接生硬地跳到目标位置。
不大美观，为了对用户体验做一个优化。

上网看了看教程，应用到前段时间做的地狗购物网上了。

主要思想是，
1.用jQuery的选择器选出具有跳转定位的a链接
2.给其中每一个a元素绑定一个click事件
3.使用offset()方法获取目标的位置信息，取得其中的top值
4.使用animate()动画，实现缓慢平滑运动效果
5.return false，阻止浏览器默认跳转事件

最后，我们的平滑滚动效果就完成啦！

不过还有一点点小问题需要注意，绑定事件的时候，一定不要忘记包装成jQuery对象。

1、jQuery对象将无法使用DOM对象的任何方法。

2、DOM对象也不能使用jQuery的里方法
用#id作为选择符取得的是jQuery对象而
并非document.getElementById(“id”) 所得到的DOM对象，
两者并不等价。

jQuery和DOM是只能使用自己的方法和属性的，所以千万不要忘记做相应的转换。

以下附上转换方法：

DOM对象转换成jQuery对象：
例：//<input type=”text” name=”username” id=”username” value=”张老师” />
    //获取DOM对象
var username=document.getElementById(“username”);
alert(username.value);

//转换为jQuery对象
var $username= $(username);
//使用jQuery方法
alert(“^^^”+$username.val());

jQuery对象转换为DOM对象：
(1)jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

   //<input type=”text” name=”username” id=”username” value=”张老师” />
   //获取jQuery对象
   var $username=$(“#username”);
   alert($username.val());

   //转换为DOM对象
   var username=$username[0];
   alert(username.value);

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象  

   //转换为DOM对象
   var username1=$username.get(0);
   alert(username.value);

优化过的页面代码如下。感兴趣的朋友可以自己运行看看。。
(:зゝ∠)顺便欢迎各位大大批评指正！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗购物网——网页定位导航效果</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
        }

        li {
            list-style: none;
        }

        #content {
            width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        #content h1 {
            color: #0088bb;
        }

        #content .item {
            padding: 20px;
            margin-bottom: 20px;
            border: 1px dotted #0088bb;
        }

        #content .item h2 {
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #0088bb;
            margin-bottom: 10px;
        }

        #content .item li {
            display: inline;
            margin-right: 10px;
        }

        #content .item li a img {
            width: 230px;
            height: 230px;
            border: none;
        }

       #menu{
        position:fixed;
        top:120px;
        right:180px;
        }

        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }

        #menu ul li a:hover,
        #menu ul li a.current {
            color: