使用jquery滑动来导航带有元素的示例将不起作用
使用jQuery滑动来导航带有元素的示例将不起作用可能是由于以下原因之一：
- jQuery库未正确加载：请确保在HTML页面中正确引入了jQuery库文件。可以通过在<head>标签中添加以下代码来引入jQuery库：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 代码错误：请检查你的jQuery代码是否正确。确保选择器和事件绑定等语法正确无误。以下是一个简单的示例代码，用于在点击导航链接时滑动到相应的元素：$(document).ready(function(){ $('a[href^="#"]').on('click', function(event) { var target = $(this.getAttribute('href')); if( target.length ) { event.preventDefault(); $('html, body').stop().animate({ scrollTop: target.offset().top }, 1000); } }); });
- 元素选择器错误：请确保你的导航链接的href属性值与目标元素的id属性值匹配。例如，如果导航链接的href属性值为"#section1"，则目标元素的id属性值应为"section1"。
- CSS样式问题：滑动效果可能会受到CSS样式的影响。请确保你的元素具有足够的高度和正确的定位属性，以便滑动效果能够正常显示。
如果以上解决方法都没有解决问题，建议提供更多的代码和具体情况，以便更好地帮助你解决问题。
相关·内容
1回答
jQuery动画滚动:是否可以将该功能限制为特定的目标？
jquery、css
我是jQuery的新手(请耐心等待)，我正在使用css技巧提供的一个代码片段，可以从导航菜单中滚动到单个页面上的目标。
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
浏览 0提问于2014-12-18得票数 1
4回答
使用jquery滚动到div
javascript、jquery
我有一个问题以前可能已经回答过，但我无法使代码工作。
我有一个<a href="#page-contact">，一旦用户点击它，它应该向下滚动(用动画)到一个id "page-contact"的div。它确实带我去了表单，但没有动画
以下是代码：
<li class=""><a href="#page-contact">Contact</a></li>
<section id="page-contact" class="page-cont
浏览 3提问于2015-04-08得票数 1
回答已采纳
3回答
JS涡旋事件没有触发
javascript、php、scroll、onclick
我尝试用我在网上找到的js-函数覆盖滚动到id事件。
由于未知的原因，它不会启动。Js本身是正确实现的，因为我设法用document.print('test');输出了一些文本。
我真的不喜欢Js，所以请对我有耐心。
Index.php:
<html>
<head>
<title>MyWebsite</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /&g
浏览 2提问于2015-05-17得票数 1
回答已采纳
2回答
Javascript不加载
javascript、jquery、html
我的Javascript不与我的HTML通信。我正在尝试执行滚动函数，但我的javascript和HTML之间的连接似乎有问题。
Javascript:
$('a[href^="#"]').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTo
浏览 1提问于2016-04-28得票数 0
回答已采纳
1回答
CSS视差效应高度到50%
html、css、height、parallax、parallax.js
我目前使用的视差效果，这是整个背景的头版。我的问题是我想把高度设定在50%左右。但这不管用。
代码：
<header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test">
.parallax-window {
position: relative;
overflow: hidden;
width: 100%;
height: 50%; //Not working.. wh
浏览 0提问于2018-02-22得票数 0
2回答
如何排除平滑滚动脚本中的链接？(jQuery)
javascript、jquery、html、twitter-bootstrap
我正在使用一个引导带3旋转木马在我的网站。我还使用了这个jQuery脚本：
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
浏览 3提问于2015-04-12得票数 1
回答已采纳
1回答
单击特定链接时，将不同的偏移量设置为滚动顶。
javascript、jquery
我现在有下面的代码可以很好的工作，当点击链接时滚动到div的顶部.
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
targe
浏览 1提问于2014-09-18得票数 1
回答已采纳
2回答
单击链接后，如何使链接不滚动到顶部的页面？
javascript、jquery
我在JSFiddle上有以下代码
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
t
浏览 0提问于2017-02-03得票数 0
回答已采纳
2回答
脚本链接格式以实现跨浏览器兼容性
javascript、css、header、squarespace
我在的头中引用了以下脚本。我会单独发布HTML，但它是多山的。
脚本触发伟大的Safari！火狐和Chrome根本不读它们。，我是不是格式化错误了？，还是这可能是Squarespace平台上的一个bug？
<link rel="stylesheet" type="text/css" href="http://www.wlvrtn.com/sites/www.livingcleanibogaine.com/css/style-five.css" />
<script type="text/javascript"
浏览 1提问于2013-12-10得票数 0
回答已采纳
1回答
如何使Jquery平滑卷轴工作？
jquery、smooth-scrolling
我找到了一个平滑滚动的Jquery文件，是由这个家伙Karl写的。链接在这里：。我想要的是使我的导航图标平滑-滚动到锚点一旦点击。导航栏的Html代码如下：
<div class="nav">
<ul>
<li class="icon"><a href="#info"><img src="./Img/info-64.png" alt="info-icon"></a></li>
浏览 2提问于2015-02-05得票数 0
回答已采纳
4回答
如何从javascript中排除特定的<div>
javascript、jquery
我是个初学者，很难找到一个解决问题的办法。我有一个网站。我使用javascript作为滚动效果。以下是代码：
jQuery(function($) {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(
浏览 11提问于2015-03-16得票数 0
回答已采纳
2回答
将按钮javascript应用于href
javascript、jquery、html
我的朋友给了我这段代码，当用户按下锚按钮时，它将使页面具有平滑的滚动效果：
<form id = "button_design" action="#page2">
<input type="submit" class="anchor-button" value="Page 2" />
</form>
以及javascript：
$(function() {
$('input.anchor-button').click(function(e) {
e.pr
浏览 1提问于2017-04-01得票数 0
回答已采纳
2回答
在延迟后运行的JS函数
javascript、jquery、jquery-animate、smooth-scrolling
我有两个功能。我希望将它们组合在一起，这样当您从左向右移动时(反之亦然)，它就不会有延迟(就像向下滚动函数所做的那样)。
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target =
浏览 4提问于2015-10-08得票数 2
回答已采纳
1回答
根据窗口宽度执行jQuery函数
jquery、resize、width、smooth-scrolling
我有一个jQuery函数，我只想在浏览器窗口有最小宽度时执行它(该函数是在页面上的内部链接之间上下移动时添加平滑滚动效果，但干扰我试图在宽度小于最小宽度时尝试实现的菜单)，我几乎可以使用以下行获得它，这些行在加载页面和调整窗口大小时执行，当我将子最小宽度(无效果)传递到大于最小宽度(效果)时，但当从后向(从效果到无效果)传递时，它工作得很好。就像有些是缺少的，一条指令来删除先前的代码或其他语句中的变量，但我不知道是什么。在这里，jQuery代码：
// the code has 3 detection modes for the width of the browser so it is
浏览 0提问于2016-03-27得票数 0
2回答
引导更改导航栏.active背景颜色
javascript、html、css、twitter-bootstrap、navbar
我有一个导航栏，我不能真正看到.active的颜色，因为我正在使用一个我真的喜欢的第三方主题，但我有一个主题的问题。我无法正确查看当前处于活动状态的导航栏项目。因此，我想给.active元素添加一个背景色。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!-- MOBILE FIRST -->
<meta name=
浏览 0提问于2016-03-20得票数 2
回答已采纳
1回答
滚动到有条件的平板和移动设备的位置
jquery、jquery-animate、target、scrolltop
我有以下的第一部分完美地工作，其中滚动到顶部(允许一个固定的导航)，并停止155 of从页面顶部。然而，当我们深入到平板电脑时，头的深度下降到75 to，然后移动到65 to。
是否有一种方法可以根据导航条的css高度有条件地滚动到不同的位置？注释部分是我一直在玩的。
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length )
浏览 5提问于2015-04-22得票数 0
回答已采纳
1回答
jQuery平滑滚动完整url，包括id
jquery、scrolltop
只是想知道如何启用平滑滚动使用完整的网址。
这是导航仪
<nav class="primary-nav">
<ul>
<li><a href="http://domainname.com/">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services<
浏览 9提问于2016-09-09得票数 0
回答已采纳
1回答
锚链接到页面顶部后粘稠的标题。如何设置平滑滚动JS在滚动时始终保持75 to的最高边距？
javascript、html、jquery、css
我在我的Joomla网站上使用了一个joomshaper模板。当我单击指向某个节的锚链接时，它将打开页面顶部的节，该节位于棒头后面。我试过以下几种方法，但不起作用：
#aboutus:before {
content: '';
display: block;
position: relative;
width: 0;
height: 75px;
margin-top: -75px;
}
我还尝试用下面的css为我的链接设置一个类，但没有成功：
a.anchor {
display: block;
posit
浏览 2提问于2021-02-17得票数 0
回答已采纳
2回答
使用引导时自定义CSS不起作用
css、twitter-bootstrap
我已经设置好了我的angular应用程序，一切都在正常工作。我正在尝试添加一些自定义css到输入，所以我创建了一个新文件my.css
.myInvalid {
border: 5px solid red;
}
我已经将该文件添加到我的index.html中，并且加载了该文件，但是当我编写<input type="text" class="myInvalid"/>时，我的输入周围没有任何边界。
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head&g
浏览 4提问于2013-07-18得票数 1
1回答
一页HTML页面上的两组Jquery
javascript、jquery、html、css
我正在创建一个只有一页的HTML页面，其中有锚作为菜单项。我发现了有助于简化整个页面到锚的转换的代码。以下是平稳过渡的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script&g
浏览 1提问于2015-12-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
