问题标签 [anchor-scroll]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
22 浏览

html - 使用 CSS 防止文本在锚定按钮上滚动

我有一个按钮,我将其锚定在页面的左下方,因为我希望它始终可以访问,如果上面的内容过多,则无需滚动。这是我目前必须完成的 css:

现在我想这样做,如果有可滚动的内容,则内容不会在按钮“后面”滚动,而是从按钮上方某个位置的视图中消失。顺便说一句,包含 div 的标题是“侧面板”。我怎么能用css做到这一点?

0 投票
2 回答
4995 浏览

javascript - jQuery - 单击按钮滚动到锚点

我试图制作一个简单的脚本来检查用户是否按下了网页上的按钮。如果他这样做了,它会检查用户是否滚动过某个 div,如果他这样做了,则页面滚动到另一个页面,否则什么也不会发生。

从技术上讲,我的代码可以工作,因为它将 DOM 滚动到锚点,但作为副作用,它会阻止您在滚动后滚动。

我试图习惯 jQuery,但显然我还有很长的路要走。我什至无法弄清楚为什么它会冻结整个页面。任何想法为什么会这样?

0 投票
0 回答
720 浏览

jquery - 平滑滚动到锚点不适用于href中的哈希和正斜杠

我有一个单页站点,其中锚点(# 链接)链接到文档的不同部分。向下滚动/单击时,活动会突出显示。

代码正在工作,但问题是,当我有 href 时<a href="/#anchor">Anchor</a>,它似乎不适用于我的代码。如果我没有正斜杠也有同样的效果,它就像<a href="#anchor">Anchor</a>

任何帮助将不胜感激。

这是两个小提琴

HTML

JS

CSS

0 投票
9 回答
59903 浏览

html - Angular4 - 滚动到锚点

我正在尝试对同一页面上的锚元素进行简单的滚动。基本上,该人单击“尝试”按钮,然后滚动到页面下方的区域,ID 为“登录”。现在,它正在使用基本的id="login"&<a href="#login"></a>但它正在跳转到该部分。理想情况下,我希望它在那里滚动。如果我使用 Angular4,是否有一些内置方法可以做到这一点,或者最简单的方法是什么?谢谢!

整个模板...(组件仍为空)

0 投票
2 回答
220 浏览

angularjs - 没有承诺的角锚滚动

我试图在 Angular 1.x 中使用一个非常简单的 scrollTo 。我有导航菜单链接,单击该链接应滚动到 div#id。我只能通过“承诺”来实现这一点。

例如,这有效:

但这没有回应:

就好像需要一个承诺,但是要让它在没有承诺的情况下通过简单的点击工作?

0 投票
0 回答
399 浏览

javascript - 不同滚动div中的锚链接和锚目标

我有一篇带脚注的文章。脚注位于文章旁边的固定且可滚动的 div 中。它们分为两列(左侧的文章,右侧的脚注)。

我想在文章中指向脚注的锚点和脚注中指向文章的锚点中都有滚动效果。只有带有目标锚的 div 才能滚动。

例如,如果我单击文章中的上标数字,脚注 div 应该滚动并将相关脚注定位在页面顶部。同样,如果我单击脚注编号,则正文应滚动并将相对上标编号定位在页面顶部。

这是 HTML + CSS 的示例:

这是我的 JS:

当我单击右栏中的锚链接时,左侧会滚动将右锚目标定位在页面顶部。问题是当我做相反的事情时。如果我单击左列上的锚链接,则同一列会向上滚动,然后右列会跳转到锚目标。似乎左列向上滚动了与右列上的锚点目标和同一列顶部的距离相同数量的像素。

有谁知道如何使它工作?

0 投票
1 回答
1118 浏览

angularjs - 带有href的AngularJs中断滚动并将url转换为hash+fwslash+id

如何配置AngularJs滚动到带有#id的href中指定的锚元素?

问题

带有散列的锚链接,例如。href="#recommanded" 变为 url#/recommanded 而不是 url#recommanded,因此它不会按预期滚动。如果没有加载 angularjs 库,它工作正常。在状态栏中,当我将光标移动到链接顶部时,浏览器的状态栏会正确显示我将要前往的链接,但单击后它将被转换并且无法正确滚动。我没有使用角度的路线。

我的 AngularJS 代码中可能会干扰滚动/js 位置操作的片段:

带有标签的电话:

试验和错误

内部解决方法

锚滚动

在线程如何处理 AngularJS 中的锚散列链接中,建议插入以下代码段:

在调用它时:

这导致控制台上没有错误,但与以前的行为相同。网址被转换为没有滚动到锚点。此外,我不喜欢最终为此拥有 ng-click 功能的想法。

附加我的angularjs:

并将其称为

结果没有错误,但滚动也不起作用。

有些人暗示只在href 中做一个#/#recommanded。使用目标 =“_self”。他们都不适合我。

外部解决方案

指令滚动到

html看起来像:

这个确实有效,但更喜欢调用 href="#recommended" 的解决方案。或者至少为滚动设置动画。

angular-scroll 的 du-smooth-scroll

在我的 angularApp.js 中添加了duScrollvar app = angular.module('app', [ ..., 'duScroll' ]); 我在 angularApp.js 页面上加载了 angular-scroll.min.js 文件,没有错误。我要求<a du-smooth-scroll href="#recommended-to-you">recommanded</a>一个具有该 ID 的现有 div。但它不会做任何事情,没有js错误但不会移动。尝试了添加显式缓动持续时间等设置的 duScroll 模块,没有错误但无法正常工作。

0 投票
0 回答
295 浏览

javascript - 如何在 Angular JS 中将 $anchorScroll 用于模态?

我正在研究 Angular JS,其中我有一个模式窗口。它有一个滚动条和一些隐藏元素。只有当用户单击某个按钮时,这些隐藏元素才会可见。所以我想当用户点击那个按钮时滚动条应该自动移动到弹出窗口的底部。为此,我正在使用 Angular JS 的 $anchorScroll 服务。问题是,该服务正在滚动主页而不是弹出窗口。

下面是我的控制器代码:

我希望将此自动滚动应用于我的模态窗口。我怎样才能做到这一点?

0 投票
3 回答
9048 浏览

html - 同一页面 id 中某些元素的锚定标记不起作用

哈哈。我的小项目遇到了麻烦。我已经创建了<a href="slogannya">some icon</a><blockquote id="slogannya">但是当我单击<a>标签时它不起作用。这是我的代码:

html

jQuery

我怎样才能使这项工作?请帮我 :)

编辑

我知道我的问题是什么。在我的项目中,我有一个名为“general.css”的 css(此 css 内容 css 重置和任何页面的其他样式)。在这个 css 中,它使任何元素成为box-sizing: border-box;和其他样式。不知道具体是什么问题。但是当我删除我的“general.css”时,平滑滚动就可以了。谢谢你所有的回答朋友:),我很感激!!

0 投票
2 回答
890 浏览

javascript - 滚动到 Prestashop (Jquery) 中的锚点

请你帮我做一个小功能 - 我不擅长 JS / Jquery。我需要滚动到 Prestashop 中的锚点,所有代码仅在 index.php 中起作用,而不是在其他页面(产品页面、类别页面 ..)..

所以我需要这个函数的规则只能在 index.php 页面上激活..但是下面的代码不是函数:(

拜托,你能帮帮我吗?(在菜单链接中,我有类 a.linkscroll = a href="index.php#some-anchor",所以我可以使用这个 = 我不需要使用的另一个锚)..scroll 函数我只在 main 中使用过页面 (index.php),锚点有 ID(例如 id="some-anchor")。

谢谢您的帮助!