使用 jQuery 滚动到一个 div [英] Scroll to a div using jQuery

查看：19
本文介绍了使用 jQuery 滚动到一个 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我有一个页面，侧面有一个固定的链接栏.我想滚动到不同的 div.基本上该页面只是一个很长的网站，我想在其中使用侧面的菜单框滚动到不同的 div.

这是我目前使用的 jQuery

$(document).ready(function() {$('#contactlink').click = function() {$(document).scrollTo('#contact');}});

问题是它在加载时会自动转到联系人 div，然后当我按下菜单中的 #contactlink 时，它会滚动回顶部.

HTML

<html lang="en"><头><元字符集=utf-8"><!-- jQuery--><script src = "<?php echo base_url() ?>assets/js/jquery.js></script><!-- .js 文件--><script src = "<?php echo base_url() ?>assets/js/pagetwo.js></script><link rel="样式表";类型=文本/css"；href=assets/css/reset.css"/><!-- 页面的 .css --><link rel="样式表";类型=文本/css"；href=<?php echo base_url()?>assets/css/pagetwo.css"/><!-- 页面标题--><title><!-- 插入标题--></title><身体><div id="容器"><div id="侧边栏"><ul><li><a id = aboutlink";href=#">auck</a></li><li><a id = "peojectslink";href=#">项目</a></li><li><a id = resumelink";href=#">简历</a></li><li><a id = contactlink"href=#">联系方式</a></li>

<div id="内容">

<p class="header">uck</p><p class="info">Lorem ipsum dolor sat amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.例外 sint occaecat cupidatat non proident, 在 culpa qui offcia deserunt mollit anim id est labourum 中被禁止.</p>

<div class="sections"id="projects"><p class = header">Projects</p><p class="info">项目</p>

<div class="sections";id=简历"><p class = header">简历</p><p class="info">简历</p>

<div class="sections";id=联系人"><p class = header">联系方式</p><p class="info">联系方式</p>

解决方案

首先，你的代码不包含 contact div，它有一个 contacts div！

在侧边栏中，您在页面底部的 div 中有 contact，您有 contacts.我删除了代码示例的最终 s.(您还在侧边栏中拼错了 projectslink id).

其次，查看jQuery参考页面上click的一些示例.您必须使用 click like, object.click( function() {//Your code here } ); 以便将 click 事件处理程序绑定到对象.... 就像我下面的示例.顺便说一句，您还可以通过不带参数的使用来触发对对象的点击，例如 object.click().

第三，scrollTo 是 jQuery 中的 plugin.不知道你有没有安装插件.如果没有插件，您将无法使用 scrollTo().在这种情况下，您想要的功能只有 2 行代码，所以我认为没有理由使用该插件.

好的，现在开始解决.

如果您单击侧栏中的链接，下面的代码将滚动到正确的 div.窗口必须足够大以允许滚动:

//这是一个滚动到#{blah}link 的函数函数 goToByScroll(id) {//删除链接"从身份证id = id.replace(链接",");//滚动$('html,body').animate({scrollTop: $("#" + id).offset().top}， '慢的');}$("#sidebar > ul > li > a").click(function(e) {//当一个链接被按下时防止页面重新加载e.preventDefault();//调用滚动函数goToByScroll(this.id);});

实例

( 滚动到取自 此处 )

PS:显然你应该有一个令人信服的理由去这条路线而不是使用锚标签<a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

so I have a page that has a fixed link bar on the side. I'd like to scroll to the different divs. Basically the page is just one long website, where I'd like to scroll to different divs using the menu box to the side.

Here is the jQuery I have so far

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

The issue is it is automatically going to the contact div when it loads, then when I press the #contactlink in the menu it scrolls back to the top.

EDIT: HTML

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">
    
    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>
    
    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    
            
    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       
    
    <!-- page title-->
    <title><!-- Insert Title --></title>
    

</head>
<body>
    <div id="container">
    
        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>
        
        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

解决方案

First, your code does not contain a contact div, it has a contacts div!

In sidebar you have contact in the div at the bottom of the page you have contacts. I removed the final s for the code sample. (you also misspelled the projectslink id in the sidebar).

Second, take a look at some of the examples for click on the jQuery reference page. You have to use click like, object.click( function() { // Your code here } ); in order to bind a click event handler to the object.... Like in my example below. As an aside, you can also just trigger a click on an object by using it without arguments, like object.click().

Third, scrollTo is a plugin in jQuery. I don't know if you have the plugin installed. You can't use scrollTo() without the plugin. In this case, the functionality you desire is only 2 lines of code, so I see no reason to use the plugin.

Ok, now on to a solution.

The code below will scroll to the correct div if you click a link in the sidebar. The window does have to be big enough to allow scrolling:

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

Live Example

( Scroll to function taken from here )

PS: Obviously you should have a compelling reason to go this route instead of using anchor tags <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

这篇关于使用 jQuery 滚动到一个 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆