[自用]锚点2，js平滑到顶端、底部、或者某个位置

最新推荐文章于 2022-04-20 16:33:47 发布
最新推荐文章于 2022-04-20 16:33:47 发布
阅读量332 收藏
点赞数
文章标签： javascript xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbhcxs/article/details/78063552
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js平滑滚动到顶部、底部、指定地方</title>
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
	.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
	.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
</style>
</head>

<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box bottom"></div>

<div class="location">
	 <p class="scroll_top">返回顶部</p>
	 <p class="scroll_a">产品介绍</p>
	 <p class="scroll_bottom">滑到底部</p>
</div>
<script type="text/javascript">
	jQuery(document).ready(function($){
		$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
		$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
		$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
	});
</script>
</body>
</html>


二、滑动到顶端和关闭功能

<li class="back" title="返回顶部" id="gotop" href="javascript:void(0)"><span>返回<br>顶部</span></li>
<li onClick="custom_close()" title="关闭页面" id="gotop" href="javascript:void(0)"><span>关闭<br>页面</span></li>

<!-- 加入返回顶部功能-->
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.back').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});         
    });
</script>
<!-- 关闭 -->
<script language="javascript"> 
function custom_close() { 
if (confirm("您确定要关闭本页吗？")) { 
window.opener = null; 
window.open('', '_self'); 
window.close() 
} else {} 
} 
</script>

三英_战麻布
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
不用锚点也可以平滑滚动到页面的指定位置实现代码
09-05
但是，如果不希望使用锚点，或者需要更多的控制，可以使用JavaScript来实现平滑滚动效果。 在提供的内容中，描述了如何实现不使用锚点的平滑滚动。这主要通过jQuery库和scrollTo插件来完成。首先，需要在HTML页面的...
js 定位到某个锚点的方法
10-21
下面小编就为大家带来一篇js 定位到某个锚点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html返回底部代码,返回页面顶部及去页面底部的js实现代码
weixin_35316459的博客
06-08 2210
大家应该都见过这样的功能：在页面的一侧有个 返回顶部、到达底部 之类的功能。本文用JS脚本来实现这样的功能，与以往的那种靠#锚点的方法略有不同。1、到达顶部：复制代码 代码示例:window.scrollTo(0, 0);2、到达底部：复制代码 代码示例:window.scrollTo(0, 99999);//一般页面长度都不够99999吧？3、页侧固定的，不随页面一起滚动区域：1)、CSS代码复...
js 锚点定位的2种简单方法
weixin_54351962的博客
04-20 2万+
一.解决方案 第一种方案：传统的锚点定位 但是这个方案有一个弊端，就是会影响url 的hash <div id="anchor">跳到这里来</div> //html中定义一个锚点，这里可以用name或者id,即锚点的目的地 <a href="#anchor">点击这</a> //这是锚点的入口，点击这，锚点激活，href属性绑定你想跳到的位置的div盒子的id或者name 第二种方案：使用scrollIntoView方法进行定位到某一位置 <div
html中锚点链接跳到底部,防止锚点将页面推到底部（HTML）
weixin_35015064的博客
06-11 730
我有一个带有style =“overflow：auto”的div，其中带有一些文本。该文本有一些锚点，我有div的链接(不在div内)，每次点击进入锚点时，页面会到达底部，就像锚点位于页面底部一样。防止锚点将页面推到底部(HTML)有什么办法可以防止这种情况发生？LinkText Inside, Big text with hereText Inside, Big text with here...
<a>标签锚点，置顶置底
独茧
02-13 1949
锚点
基于vue监听滚动事件实现锚点链接平滑滚动的方法
08-28
jump 函数首先获取当前锚点的索引，然后获取当前锚点到顶部的距离，接着计算出滚动的步长，最后使用 smoothDown 或 smoothUp 函数来实现平滑滚动。 smoothDown 函数和 smoothUp 函数是实现平滑滚动的关键，...
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
总的来说，Vue 中实现导航锚点的平滑滚动和导航栏对应变化，主要是通过监听滚动事件、计算锚点位置以及平滑滚动到目标位置来完成的。这个过程涉及到DOM操作、事件处理以及数据绑定，是 Vue.js 开发中的基础技能。...
JS滑动到页面顶部（或底部）
热门推荐
xiaopeng_han123的博客
05-24 4万+
window.scrollTo(0, document.documentElement.clientHeight);
js滑动到头部底部或目标位置和锚点相似多一个滑动效果
weixin_43420146的博客
03-21 328
js-点击按钮页面滚动到顶部，底部，指定位置 KaTeX parse error: Expected '}', got 'EOF' at end of input: …ick(function(){(‘html,body’).animate({scrollTop: ‘0px’}, 800);}); //页面滚动至顶部 KaTeX parse error: Expected '}', got...
自动定位到底部
weixin_39347356的博客
02-28 1728
&lt;div class="Dialog_box"&gt; 多行信息展示 &lt;span class="min-height" id="box"&gt;&lt;/span&gt; &lt;/div&gt; var element = document.getElementById("box"); element.scrollIntoView
JeeCms使用笔记
折戟沉沙嗜血柔情
05-30 534
自定义html标签模板位置： WebContent\WEB-INF\config\jeecms\jeecms-context.xml <!--标签--> <bean id="cms_pagination" class="com.jeecms.cms.action.directive.PaginationDirective"/> <bean id="cms_channel_list" class="com.jeecms.cms.action.directive.Channel
同页面锚链接(例如点击顶部导航跳转底部)
weixin_30480651的博客
08-14 435
　　　　<div class="top"> <img class="img1" src="./img/logo.png" alt=""> <a href="#phone"><img class="img2" src="./img/lianxiwomen.png" al...
a标签跳转锚点到页面指定位置
wangweiscsdn的博客
02-14 3万+
代码如下： JS方式: bb aaaaaaaaaaa bbbbbbbbbb ccccccccccc dddddddddd 直接根据id或者name属性:
UI Automator 的详细用法步骤解析
android 系统定制开发那些事
09-28 3万+
浅谈UI Automator 1.UIAtomator测试工具定义以及用途 2.四大测试工具的优缺点比较 3.测试工具的工作流程 4.测试环境的配置以及用到的工具的介绍 5.UIAutomator API 6.结合Demo具体的测试操作步骤 7.一点感悟 1.UIAtomator测试工具定义以及用途 Google 官方出的一种简单的UI自动化测试工具。在Android测试中，UI界面测试占...
js平滑滚动到头部、顶部以及指定位置
lianghao159的专栏
02-03 4496
js平滑滚动到顶部,底部,指定地方 采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置 滚动到顶部： $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
js定位到页面某个位置（锚点）
qq_41637614的博客
02-27 1万+
一. css控制html代码：&lt;a name="aa"&gt;&amp;nsbp;&lt;/a&gt;锚点使用：&lt;a href="#aa"&gt;跳至第一个锚点&lt;/a&gt;二. js控制完成一个操作后跳转到另一个页面指定位置：1. location.href = "#aa"; 2. window.location.hash = "#aa&
javascript实现锚点
子夜轻风
11-15 127
详见附件
Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
最新发布
03-28
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果： 1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。 2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动： ```typescript <template> <div ref="target" id="target">目标位置</div> <button @click="scrollToTarget">跳转到目标位置</button> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue' export default defineComponent({ setup() { const targetRef = ref(null) const scrollToTarget = () => { targetRef.value?.scrollIntoView({ behavior: 'smooth' }) } onMounted(() => { if (location.hash === '#target') { scrollToTarget() } }) return { targetRef, scrollToTarget, } }, }) </script> ``` 在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值